我发布这个问题之前已经有很多种问题了。但是尝试大多数答案并没有得到改变selected
选择的结果。
我们正在使用ajax加载.js脚本并动态创建一个大量嵌套在其他元素中的选择框,所有这些都带有随机ID。
首先创建外部选择&附加到主机div,
var baseSelect = '<select id="' + randId + '" placeholder="' + PlaceHolderText + '" data-stuff="' + stuffId + '"><option value="' + randId +'_a" selected>alpha</option></select>';
$(baseSelect).appendTo('#' + hostDiv);
然后从json加载选择框的数据,并将其附加到select元素
//....create other options....//
$.map(data, function (item) {
......
//create newopts
}
$("#"+randId).append(newopts);
这将生成最终选择框
<select id="rnd_1515181630427" class="sel" placeholder="Status-Zulu" data-stuff="zulu">
<option value="rnd_1515181630427_a" selected>alpha</option>
<option value="c1">choice 1</option>
<option value="c2">choice 2</option>
<option value="c3">choice 3</option>
<option value="c4">choice 4</option>
</select>
在使用ajax加载* .js的父页面中,我们有一个在所有json完成后调用的函数,
//有效的东西
var selId = $('[data-fid="'+uuid+'"]').attr('id');
console.log(selId); // prints rnd_1515181630427 -> correct id
console.log($('#'+selId).attr("placeholder")); //prints Status-Zulu -> correct
console.log($('#'+selId+' option:selected').val()); // prints rnd_1515181630427_a -> correct
console.log($('#'+selId+' option:selected').text()); // prints alpha -> correct
console.log($('#'+selId+' option[value="'+ selId +'_a"]').text()); // prints alpha -> correct
console.log($('#'+selId).eq(0).text()); // prints alpha -> correct
//我们可以更改非附加选项中的任何内容吗?
$('#'+selId+' option:selected').text("beta"); //changes selected display text to beta -> correct
console.log($('#'+selId+' option[value="'+ selId +'_a"]').text());// prints beta -> correct
$('#'+selId+' option[value="'+ selId +'_a"]').text("delta"); // changes selected display text to delta -> correct
//我们可以从附加选项中获取任何内容吗?
$('#'+selId+' option[value="c2"]').text("delta"); //not changed
console.log($('#'+selId+' option[value="c2"]').text()); // console is empty ??
console.log($('#'+selId).eq(1).text()); // console empty
//基于其他SO答案的其他不起作用的变体
$('#'+selId+' option[value=c2]').prop('selected', true);
$('#'+selId+' option[value="c2"]').prop('selected', true);
$('#'+selId+' option[value=c2]').attr('selected', 'selected');
$('#'+selId+' option[value="c2"]').attr('selected', 'selected');
当代码似乎对作为<option>
函数的一部分创建的第一个<select>
起作用时,我们做错了什么,而不是附加到<option(s)>
的{{1}}上<select>
对象在alatter时间?