その値に基づいてクライアントに追加された選択オプションを選択する方法

Question

jqueryによって動的に追加されるオプションから選択できません。リットルの午前は、オプションを追加する場所です：lは手動でオプションを選択しようとしているところ

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

誤って私が選択しようとする前に警告を使用していることに気付きました。それはうまくいきましたので、項目を正しく読み込むために少し時間が必要だとわかりました。