Question

今天我陷入了一个奇怪的问题。它对我来说看起来很基本，但不知怎的，我花了2个多小时才完成它仍然没有解决。

我有一个动态生成的下拉列表。 jQuery版本 - v1.11.1

	var pagename="Spend Impact";
	var countryChannelObj = null;
	var DEFAULT_COUNTRY = "US";
	 $.ajax({
	        url: 'digitalImpactHeaders',
	          success: function(data) {
	            $(document).ready(function(){
	            	countryChannelObj = data;
	            	populateImpactCountry(DEFAULT_COUNTRY);
	            	populateImpactHeader(DEFAULT_COUNTRY);
	            });
	          }
	        });
	

/*
{
    "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(){
    	var country = $("#impactCountry").val();
    	populateImpactHeader(country);
    });
    
    populateMonthlyImpactDataOnLoad();
    
    
    function populateMonthlyImpactDataOnLoad(){
    	var endDate = moment().format('YYYY-MM-DD'); //CurrentDate
    	var startDate  = moment(endDate).startOf('month').format('YYYY-MM-DD');
    	populateImpactData(startDate,endDate);
    }

    function populateQuarterlyImpactData(){
    	var endDate = moment().format('YYYY-MM-DD'); //CurrentDate
    	var startDate = getQuarterFirstDay(new Date());
    }

    function populateYearlyImpactData(){
    	var endDate = moment().format('YYYY-MM-DD'); //CurrentDate
    	var startDate = moment(endDate).dayOfYear(1).format("YYYY-MM-DD");
    }

    function populateCustomDatesImpactData(){
    	var endDate = $("#impactEndDate").val();
    	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');
    }
    
    
    	
    	function populateImpactData(startDate,endDate){
    	
    			
    			var country = $('#impactCountry option:selected').val();
    			console.log("countryName is ==>"+country);
    			var channel = $("#impactChannel option:selected").val();
    			console.log("channel is ==>"+channel);
    		    	
});


function populateImpactCountry(defaultCountry){
	$.each(countryChannelObj, function(index){
		$("#impactCountry").append($("<option />").val(index).text(index));
	});
	$('#impactCountry option[value="'+defaultCountry+'"]').attr("selected",true);
}

function populateImpactHeader(country){
	$("#impactChannel").html("");
	var channelData = countryChannelObj[country];
	if(channelData.length >0){
		$("#impactChannel").append($("<option />").val("All").text("All"));
	}
	$.each(channelData, function(index) {
		$("#impactChannel").append($("<option />").val(channelData[index]).text(channelData[index]));
	});
}

    <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 Pande

Answer 1

三件事。

您需要在$(document).ready()函数中填充它们。
使用$.ajaxComplete获取下拉值。
countryChannelObj是undefined。解决了这个问题。

Answer 2

在定义函数（populateImpactCountry）时未定义

countryChannelObj。

当你使用ajax时，你需要将countryChannelObj传递给函数才能在函数体内使用它：

populateImpactCountry("US", countryChannelObj);

然后在函数内部：

function populateImpactCountry(defaultCountry, countryChannelObj) {

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

Answer 3

对不起@Vatsal，假设您在下拉列表中动态创建选项时遇到了问题。显然不是:)我已经编辑了我的答案。

1）首先，最好在document.ready（）中进行AJAX调用。由于您的AJAX调用可能需要比页面加载更长的时间，因此当您运行document.ready（）函数时，countryChannelObj将为空。此外，最好只将它用于数据检索并在document.ready（）函数中执行数据填充。

2）如果你仍想在document.ready（）之前使用$ .ajax，请在document.ready（）中使用一个计时器来连续检查countryChannelObj何时不为null，然后运行数据填充函数。找到数据后，您可以清除计时器。

我尝试在以下jsBin中做类似的事情： http://jsbin.com/pagahabizo/1/edit?js,output

希望它有所帮助！

获得动态生成的下拉列表Jquery的价值

3 个答案: