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

Question

I am unable to select from options that are added dynamically by jquery. This is where l am adding the options:

$.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();
        }
    });

This is where l am trying to select an option manually:

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

The pres_product is an hidden tag with the value of the option i wish to select. I have checked the value of $('#pres_product').val() to ensure its correct. I have noticed that selection on a select with options that were added from the server works perfectly.

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

I solved it by causing a delay before selection of the item. It seems that it was not fully loaded if the selection of the value was done immediately. Below is the code:

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

I noticed that accidentally when i used an alert just before trying to select. It worked well so l figured out that the items needed a little bit of time to load properly.