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

Question

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

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

结果是它总是更改为第一个动态填充的结果，该结果也恰好具有值“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);

});

这里是选择元素的 HTML：

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

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

Answer 1

发生了什么：

1. 发送 AJAX 请求
2. 然后您将进入“$('select#doc_headings').val(doc_headings_selected);”的执行
3. 接收来自服务器的响应，在 ajax 调用中触发 success 函数...它正在填充选择菜单。

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

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

Answer 2

用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);
}
 });
});