如何根据选择选项的值选择客户端上添加的选择选项

How to select a select option added on the client based on its value

本文关键字：选择 选项 添加 客户端 何根      更新时间：2023-09-26

我无法从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()的值是否正确。我注意到，从服务器添加选项的选择上的选择工作得很好。

您应该设置selected属性

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


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>

我通过在选择项目之前造成延迟来解决这个问题。如果立即完成值的选择，它似乎没有完全加载。下面是代码:

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

我注意到，当我在尝试选择之前使用警报时，不小心。它工作得很好，所以我发现这些项目需要一点时间才能正确加载。

相关文章：