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

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

這是其中l我試圖選擇手動選項：

$('#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); 

我注意到，意外時，當我試圖選擇使用警報之前。它工作得很好，所以我覺得這些項目需要一點時間來正確加載。