Question

如果选项由AJAX填充，则更改选择选项的值http://jsfiddle.net/ueDTd/不起作用。

这应该会将选项更改回页面重新加载后的状态，因为找不到表单（缺少必填字段等）

结果是它总是更改为第一个动态填充的结果，该结果也恰好具有值“1”。

以下是完整的代码，包括AJAX调用：

$(document).ready( function() {

var dh_json;
var url = base_url+'doc_headings/get_json_doc_headings';
$.ajax({
        url: url,
        dataType: 'json',
        success: function(encoded_json){
            dh_json = encoded_json;
            $.each(encoded_json, function(key, index) {
                $('#doc_headings').append(
                    $('<option>', { value : index.id } )
                    .text(index.content)
                );
            }); 
        } // End of success function of ajax form
}); // End of ajax call    

$('#doc_headings').change(function() {
   var dh_el_value = $('#doc_headings').val();
  $.each(dh_json, function(key, index) {
    if (index.id == dh_el_value) {
        $('#body').attr("placeholder", index.directions);
    }
  });
});

$('select#doc_headings').val(doc_headings_selected);

}）;

以下是select元素的HTML：

        <select id="doc_headings" name="doc_headings">
        <option disabled="disabled" value="no" selected="selected"> - Document Type - </option>
    </select>

如何使用ajax生成的选项更改选择字段的值？

Answer 1

使用on之类的

$('#doc_headings').on('change',function() {
 var dh_el_value = $('#doc_headings').val();
$.each(dh_json, function(key, index) {
if (index.id == dh_el_value) {
    $('#body').attr("placeholder", index.directions);
}
 });
});

Answer 2

发生了什么：

发送AJAX请求
然后进入执行“$（'select＃doc_headings'）。val（doc_headings_selected）;”
从服务器接收回复，在ajax调用中触发成功函数 ...这将填充选择菜单。

将你的最后一行代码（如下所列）移到ajax调用中成功函数的末尾，它应该可以工作。

$('select#doc_headings').val(doc_headings_selected);

无法使用jQuery将选择值更改为由ajax动态填充的选项

2 个答案: