2015-06-02 104 views
0

今天我陷入了一個奇怪的問題。它看起來很基礎,但不知何故,我花了2個多小時,但仍未解決。獲取動態生成的下拉列表的值jquery

我有一個我動態生成的下拉菜單。 jQuery的版本 - v1.11.1

\t var pagename="Spend Impact"; 
 
\t var countryChannelObj = null; 
 
\t var DEFAULT_COUNTRY = "US"; 
 
\t $.ajax({ 
 
\t   url: 'digitalImpactHeaders', 
 
\t   success: function(data) { 
 
\t    $(document).ready(function(){ 
 
\t    \t countryChannelObj = data; 
 
\t    \t populateImpactCountry(DEFAULT_COUNTRY); 
 
\t    \t populateImpactHeader(DEFAULT_COUNTRY); 
 
\t    }); 
 
\t   } 
 
\t   }); 
 
\t 
 

 
/* 
 
{ 
 
    "US": [ 
 
     "Display", 
 
     "Paid Social" 
 
    ], 
 
    "DE": [ 
 
     "Non-IM Mktg Initiatives", 
 
     "Paid Social", 
 
     "Programmatic", 
 
     "Display" 
 
    ], 
 
    "UK": [ 
 
     "Programmatic", 
 
     "Paid Social", 
 
     "Display", 
 
     "Non-IM Mktg Initiatives" 
 
    ] 
 
} 
 
*/ 
 

 

 
$(document).ready(function(){ 
 

 
    $("#impactCountry").change(function(){ 
 
    \t var country = $("#impactCountry").val(); 
 
    \t populateImpactHeader(country); 
 
    }); 
 
    
 
    populateMonthlyImpactDataOnLoad(); 
 
    
 
    
 
    function populateMonthlyImpactDataOnLoad(){ 
 
    \t var endDate = moment().format('YYYY-MM-DD'); //CurrentDate 
 
    \t var startDate = moment(endDate).startOf('month').format('YYYY-MM-DD'); 
 
    \t populateImpactData(startDate,endDate); 
 
    } 
 

 
    function populateQuarterlyImpactData(){ 
 
    \t var endDate = moment().format('YYYY-MM-DD'); //CurrentDate 
 
    \t var startDate = getQuarterFirstDay(new Date()); 
 
    } 
 

 
    function populateYearlyImpactData(){ 
 
    \t var endDate = moment().format('YYYY-MM-DD'); //CurrentDate 
 
    \t var startDate = moment(endDate).dayOfYear(1).format("YYYY-MM-DD"); 
 
    } 
 

 
    function populateCustomDatesImpactData(){ 
 
    \t var endDate = $("#impactEndDate").val(); 
 
    \t var startDate = $("#impactStartDate").val(); 
 
    } 
 

 
    function getQuarterFirstDay (currentDate) { 
 
     var m = d.getMonth() - d.getMonth() % 3; 
 
     return moment(new Date(d.getFullYear(), m, 1)).format('MM-DD-YYYY'); 
 
    } 
 
    
 
    
 
    \t 
 
    \t function populateImpactData(startDate,endDate){ 
 
    \t 
 
    \t \t \t 
 
    \t \t \t var country = $('#impactCountry option:selected').val(); 
 
    \t \t \t console.log("countryName is ==>"+country); 
 
    \t \t \t var channel = $("#impactChannel option:selected").val(); 
 
    \t \t \t console.log("channel is ==>"+channel); 
 
    \t \t  \t 
 
}); 
 

 

 
function populateImpactCountry(defaultCountry){ 
 
\t $.each(countryChannelObj, function(index){ 
 
\t \t $("#impactCountry").append($("<option />").val(index).text(index)); 
 
\t }); 
 
\t $('#impactCountry option[value="'+defaultCountry+'"]').attr("selected",true); 
 
} 
 

 
function populateImpactHeader(country){ 
 
\t $("#impactChannel").html(""); 
 
\t var channelData = countryChannelObj[country]; 
 
\t if(channelData.length >0){ 
 
\t \t $("#impactChannel").append($("<option />").val("All").text("All")); 
 
\t } 
 
\t $.each(channelData, function(index) { 
 
\t \t $("#impactChannel").append($("<option />").val(channelData[index]).text(channelData[index])); 
 
\t }); 
 
}
<select id="impactCountry" name="impactCountry"></select> 
 

 
    <select id="impactChannel" name="impactChannel" ></select>

隨着提供的代碼,我能夠與動態值來填充下拉菜單。 現在,我想在第一次加載頁面後獲取此下拉列表的選定值(沒有發生更改事件,剛剛加載頁面後)。每當我做

var country = $('#impactCountry option:selected').val(); //undefined 
var channel = $("#impactChannel option:selected").val(); //undefined 


var country = $('#impactCountry').val(); //null 
var channel = $("#impactChannel").val(); //null 

我不知道我在這裏失蹤。我能想到的一件事是,由於選項是動態地引入頁面的,因此瀏覽器無法註冊這些頁面,因此當我執行.val()時,它不知道這些節點是否存在。

我試過尋找類似的帖子,但沒有找到它。任何幫助表示讚賞。

感謝, Vatsal潘德

+0

哪裏是周圍的代碼,你必須得到val()?它是在一個事件?如果是,請顯示代碼 – AmmarCSE

+0

,您不需要在未定義的地方使用'countryChannelObj',將'countryChannelObj'傳遞給成功回調中的$(document).ready(function(){' – atmd

+0

populateImpactCountry函數,即'populateImpactCountry(「US」,countryChannelObj);' – atmd

回答

2

三件事情。

  1. 您需要在$(document).ready()函數中填充它們。
  2. 使用$.ajaxComplete獲取下拉值。
  3. countryChannelObjundefined。修復。
+0

編輯了這個帖子。你能否請幫忙 – Vatsal

+0

@Vatsal dei這看起來太多工作了! –

+0

其實並不多,我只需要獲取值動態生成下拉列表的選定值:) – Vatsal

0

countryChannelObj在定義函數(populateImpactCountry)時未定義。

當你正在使用AJAX,你需要的countryChannelObj傳遞給函數爲了使用它的函數體內部:

populateImpactCountry("US", countryChannelObj);

然後在函數內部:

function populateImpactCountry(defaultCountry, countryChannelObj) {

你也需要$(document).ready(function() {成功。

+0

編輯我的文章。 countryChannelObj只是全局對象。我錯過了這篇文章。讓ajax中的document.ready不會導致任何問題。相反,它可能會給你一些性能上的好處,因爲頁面不會等待直到整個頁面加載時觸發該調用。 您可以閱讀本文作進一步閱讀 https://alexsexton.com/blog/2010/01/dont-let-document-ready-slow-you-down/ – Vatsal

+0

您是否閱讀過該文章的完整文章和評論一年舊的鏈接? – atmd

+0

我做了..即使它是10歲,你總是可以得到一些指針,你可以使用的地方:) – Vatsal

0

對不起@Vatsal,假設您在下拉菜單中動態創建選項時遇到問題。顯然不是:)我編輯了我的答案。

1)首先,最好在document.ready()中執行AJAX調用。由於您的AJAX呼叫可能需要比頁面加載更長的時間,因此您的document.ready()函數運行時countryChannelObj將爲空。另外,最好僅將它用於數據檢索,並在document.ready()函數中執行數據填充。 2)如果您仍想在document.ready()之前使用$ .ajax,請在文檔中使用計時器。ready()不斷檢查countryChannelObj是否爲空,然後運行數據填充函數。一旦找到數據,您可以清除計時器。

我試着做以下jsBin類似的東西: http://jsbin.com/pagahabizo/1/edit?js,output

希望它能幫助!

+0

編輯我的文章。 countryChannelObj只是全局對象。我錯過了這篇文章 – Vatsal