今天我陷入了一個奇怪的問題。它看起來很基礎,但不知何故,我花了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潘德
哪裏是周圍的代碼,你必須得到val()?它是在一個事件?如果是,請顯示代碼 – AmmarCSE
,您不需要在未定義的地方使用'countryChannelObj',將'countryChannelObj'傳遞給成功回調中的$(document).ready(function(){' – atmd
populateImpactCountry函數,即'populateImpactCountry(「US」,countryChannelObj);' – atmd