如何選擇基於其值添加到客戶端的選擇選項

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

我在嘗試選擇之前使用警報時意外地注意到了這一點。 效果很好，所以我發現這些項目需要一點時間才能正確加載。