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

Answer 2

我做了更多的研究，发现在我的js中添加行提供了必要的更改。 $("#u_product_name").val($('#u_prod_id_h').val()).trigger("change");

使用通过JSON消息创建的选项强制select2标记中的选定选项

2 个答案: