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()的值以确保其正确无误。我注意到，在选择中选择从服务器添加的选项可以很好地工作。

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

我在尝试选择之前使用警报时意外地注意到了。它工作得很好所以我发现这些物品需要一点时间来正确加载。

如何根据客户端的值

3 个答案: