如何选择基于其值添加到客户端的选择选项

Question

我无法从jquery动态添加的选项中进行选择。 我在这里添加选项：

$.get($('#baseurl').val() + '/category-products', {id : category_id}, function(response){
        if(response.success)
        {
            var product_select = $('#product_select').empty();
            $.each(response.products, function(i, product){
                $('<option/>', {
                    value: product.id.toString(),
                    text: product.name
                }).appendTo(product_select);
            });
            set_product();
        }
    });

我在这里尝试手动选择一个选项：

$('#product_select').val($('#pres_product').val()).change();

pres_product是一个隐藏的标签，带有我希望选择的选项的值。 我检查了$('#pres_product').val()以确保其正确。 我注意到，从服务器添加的选项中的select上的选择效果很好。

Answer 1

您应该设置selected属性

$('#product_select').val($('#pres_product').val()).prop('selected', true);

Answer 2

 var newData = [{ id: 4, name: 'four' }, { id: 5, name: 'five' }, { id: 6, name: 'six' }]; var hiddenInput = $('#pres_product'); var product_select = $('#product_select').change(function() { console.log(this.value); }); function changeOptions() { product_select.empty(); var html = ""; newData.forEach(function(d) { html += '<option value="' + d.id + '">' + d.name + '</option>' }) product_select.html(html); } function setProduct() { val = hiddenInput.val(); //can be string also "5" product_select.val(val).change(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="hidden" value="5" id="pres_product" /> <select id="product_select"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> <button onclick="changeOptions();"> Change Select </button> <button onclick="setProduct()"> Set New Value </button> 

Answer 3

我通过在选择项目之前造成延迟来解决了该问题。 如果立即选择值，则似乎未完全加载。 下面是代码：

 $.blockUI({ css: { backgroundColor: '#337AB7', color: '#fff'}, baseZ: 2000 });
    $.get($('#baseurl').val() + '/category-products', {id : category_id}, function(response){
        if(response.success)
        {
            var product_select = $('#product_select').empty();
            $.each(response.products, function(i, product){
                $('<option/>', {
                    value: product.id.toString(),
                    text: product.name,
                }).appendTo(product_select);
            });
        }
    });
    var delay = 1000;
    //allow for the items to have loaded properly
    setTimeout(function() {
        $('#product_select').val($('#pres_product').val()).change();
        $.unblockUI();
    }, delay);

我在尝试选择之前使用警报时意外地注意到了这一点。 效果很好，所以我发现这些项目需要一点时间才能正确加载。