javascript - 通过 JSON 消息创建选项，强制在 select2 标记中选择选项

Question

我正在尝试将一个值推送到我的选择框中，以便根据值进行填充。我正在使用 JSON 查询来构建选择列表，但它不允许我选择选定的选项。

以下是用于创建选择列表的 HTML:

<script>$(document).ready(function() { $("#u_product_name").select2(); });</script>    
<select id="u_product_name" name="u_product_name" style="width: 300px"></select>

以下是 JSON 请求的代码:

$(document).ready(function() { 
    $.getJSON('../prod_list_json/',function(data){
        document.getElementById('u_product_name').innerHTML = data;
    });
})

列表已正确填充所有必要的选项，但是当我传递数据以选择特定选项时，它仍然是空白。

我尝试过使用此功能强制选定的选项无济于事:

<script>
    $(document).ready(function() {
        $("#u_product_name").val($("#u_product_name_h").val());
    });
</script>

对我缺少的东西有什么想法吗？

Answer 1

使用此技术将选项设置为选定的:

selector option[value="opt_two"]').prop()

例如:

$('#u_product_name option[value="opt_two"]').prop('selected',true);

jsFiddle example

HTML:

<select id="u_product_name" name="u_product_name" style="width: 300px"></select>
<br><br>
<input type="button" id="myButt" value="Populate Select" /> 
<input type="button" id="yrButt" value="Select option TWO" />

js/jQuery:

var added_by_getSON = '<option value="opt_one">one</option><option value="opt_two">two</option><option value="opt_three">three</option>';

$("#u_product_name").select2();

// Replaced with var "added_by_getJSON" to simulate AJAX...
//    $.getJSON('../prod_list_json/',function(data){
//        document.getElementById('u_product_name').innerHTML = data;
//    });
$('#myButt').click(function(){
    $('#u_product_name').append(added_by_getSON);
});
$('#yrButt').click(function(){
    $('#u_product_name option[value="opt_two"]').prop('selected',true);
    alert('Now look');
});