値を動的に変更すると、selectのデフォルト選択値が表示されません

Question

3つの選択ドロップダウンがあり、2番目と3番目のドロップダウンは1番目のドロップダウンの選択に依存します。

ページの読み込み時に表示するデフォルトの選択肢があります。私はそれを有効にすることができたので、2番目と3番目のドロップダウンは最初のものに基づいてオプションを変更しますが、それらをクリックすると最初の選択肢が選択されていても、

HTML

<div id="additional-number-options-284"> 
    <select class="form-control" id="select-additional-number-country-284"> 
    <option disabled="disabled" selected="selected">Select a country</option> 
    <option value="7818">Country 1</option> 
    <option value="7814">Country 2</option> 
    </select> 
    <select id="select-additional-number-state-284"> 
    <option disabled="disabled" selected="selected">Select a state</option> 
    <option data-product="7818" value="65">State 4</option> 
    <option data-product="7818" value="66">State 5</option> 
    <option data-product="7814" value="62">State 1</option> 
    <option data-product="7814" value="63">State 2</option> 
    <option data-product="7814" value="64">State 3</option> 
    </select> 
    <select id="select-additional-number-plan-284"> 
    <option disabled="disabled" selected="selected">Select a plan</option> 
    <option data-product="7818" value="7819">Plan D (+$5.00)</option> 
    <option data-product="7818" value="7820">Plan E (+$15.00)</option> 
    <option data-product="7814" value="7815">Plan A (+$10.00)</option> 
    <option data-product="7814" value="7816">Plan B (+$8.00)</option> 
    <option data-product="7814" value="7817">Plan C (+$12.00)</option> 
    </select> 
</div> 

jQueryの

jQuery("[id^=select-additional-number-country-]").change(function() { 
    var id = this.id.split('-').pop(); 
    jQuery("#select-additional-number-state-" + id) 
    .find("option") 
    .show() 
    .not("option:first, option[data-product='" + this.value + "']") 
    .hide(); 

    jQuery("#select-additional-number-state-" + id).val(
    jQuery("#select-additional-number-state" + id).find("option:visible:first").val()); 

    jQuery("#select-additional-number-plan-" + id) 
    .find("option") 
    .show() 
    .not("option:first, option[data-product='" + this.value + "']") 
    .hide(); 

    jQuery("#select-additional-number-plan-" + id).val(
    jQuery("#select-additional-number-plan" + id).find("option:visible:first").val()); 

}).change(); 

JSFiddle code

Answer 1

セレクタは無効であるとあなたの属性が始まるので、問題があります。 -は正しく解釈されないので、値を引用符で囲む必要があります。

jQuery(function($) { 
 
    $('[id^="select-additional-number-country-"]').change(function() { 
 
    var id = this.id.split('-').pop(); 
 
    $("#select-additional-number-state-" + id).val('').find("option").show().not("option:first, option[data-product='" + this.value + "']").hide(); 
 
    $("#select-additional-number-plan-" + id).val('').find("option").show().not("option:first, option[data-product='" + this.value + "']").hide(); 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="additional-number-options-284"> 
 
    <select class="form-control" id="select-additional-number-country-284"> 
 
    <option disabled="disabled" selected="selected">Select a country</option> 
 
    <option value="7818">Country 1</option> 
 
    <option value="7814">Country 2</option> 
 
    </select> 
 
    <select id="select-additional-number-state-284"> 
 
    <option disabled="disabled" selected="selected" value="">Select a state</option> 
 
    <option data-product="7818" value="65">State 4</option> 
 
    <option data-product="7818" value="66">State 5</option> 
 
    <option data-product="7814" value="62">State 1</option> 
 
    <option data-product="7814" value="63">State 2</option> 
 
    <option data-product="7814" value="64">State 3</option> 
 
    </select> 
 
    <select id="select-additional-number-plan-284"> 
 
    <option disabled="disabled" selected="selected" value="">Select a plan</option> 
 
    <option data-product="7818" value="7819">Plan D (+$5.00)</option> 
 
    <option data-product="7818" value="7820">Plan E (+$15.00)</option> 
 
    <option data-product="7814" value="7815">Plan A (+$10.00)</option> 
 
    <option data-product="7814" value="7816">Plan B (+$8.00)</option> 
 
    <option data-product="7814" value="7817">Plan C (+$12.00)</option> 
 
    </select> 
 
</div>

二ここで注意すべき他の事：これを試してみてください。まず、document.readyイベントハンドラのエイリアス化された$パラメータの使用。これにより、関数の範囲内で冗長jQueryの代わりに$を使用することができます。

第2に、複雑な用途のval()は必要ありませんでした。従属selectが変更された場合、val('')を呼び出して、選択したオプションをリセットすることができます。