附加.ajax选中的jquery更改选定选项失败

时间:2018-01-05 20:45:05

标签: javascript jquery json ajax selected

我发布这个问题之前已经有很多种问题了。但是尝试大多数答案并没有得到改变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时间?

0 个答案:

没有答案