別のドロップダウン値の変更による値の変更のドロップ

Question

別のドロップダウンでオプションを変更すると変更されるドロップダウン値があります。

私はjqueryで試してみました。

しかし、以前に選択したオプションを再度選択しようとすると、再び変更されず、一度だけ変更されます。

ページを更新して、希望のオプションを選択する必要があります。 修正があれば教えてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p><select id="selectsize"> 
 
       <option value>Select Size</option> 
 
        <option value="small">Small</option> 
 
        <option value="medium">Medium</option> 
 
        <option value="large">Large</option> 
 
        <option value="xl">XL</option> 
 
        <option value="xxl">XXL</option> 
 
       </select><p></div> 
 
<div id="bx">SOME CONTENT HERE</div> 
 

 

 
<script type="text/javascript"> 
 
jQuery(document).ready(function() { 
 
//jQuery("form.cart button").removeClass('disabled'); 
 
jQuery('#bx .attr-detail-box select ').css("display", "block"); 
 
jQuery('select#selectsize').on('change', function() { 
 
var value = this.value; 
 
    jQuery('#bx .attr-detail-box select 
 
    option[value="'+value+'"]').attr("selected", "selected"); 
 
    jQuery('#bx .attr-detail-box select ').css("display", "block"); 
 
    jQuery('#selectsize').css("display", "block"); 
 
    jQuery('#bx .single_add_to_cart_button').attr("class", 
 
    "single_add_to_cart_button button alt wc-variation-selection-needed"); 
 
    }) 
 
    }); 
 
    </script> 
 
    <script type="text/javascript"> 
 
    jQuery(document).ready(function() { 
 
    jQuery('.sck .attr-detail-box select ').css("display", "none"); 
 
    }) 
 
    </script> 
 

 
<div class="attr-detail-box"> 
 
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes" style="display: block;"> 
 
<option value="">Select A Size</option> 
 
<option value="small" class="attached enabled" selected="selected">Small</option> 
 
<option value="medium" class="attached enabled" selected="selected">Medium</option> 
 
<option value="large" class="attached enabled" selected="selected">Large</option> 
 
<option value="xl" class="attached enabled" selected="selected">XL</option> 
 
<option value="xxl" class="attached enabled" selected="selected">XXL</option> 
 
</select> \t \t \t \t \t \t \t 
 
</div>

Answer 1

上記のコードでは、いくつかのミスがあります。

1）他の選択オプションセレクタが無効です。 jQuery('#bx .attr-detail-box select option[value="'+value+'"]').attr("selected", "selected");でも#bx divは.attr-detail-boxの親です。

2）コードに)}が不足しています。

$(document).ready(function() { 
 
    $('.sck .attr-detail-box select ').css("display", "none"); 
 
    $('#bx .attr-detail-box select ').css("display", "block"); 
 
    $('select#selectsize').on('change', function() { 
 
    var value = this.value; 
 
    $('#bx .attr-detail-box select option[value = "' + value + '"]').attr("selected", "selected"); 
 
    $('#bx .attr-detail-box select ').css("display", "block"); 
 
    $('#selectsize').css("display", "block"); 
 
    $('#bx .single_add_to_cart_button').attr("class", 
 
     "single_add_to_cart_button button alt wc-variation-selection-needed"); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<p> 
 
    <select id="selectsize"> 
 
    <option value>Select Size</option> 
 
    <option value="small">Small</option> 
 
    <option value="medium">Medium</option> 
 
    <option value="large">Large</option> 
 
    <option value="xl">XL</option> 
 
    <option value="xxl">XXL</option> 
 
    </select> 
 
<p> 
 

 
<div id="bx">SOME CONTENT HERE 
 
    <div class="attr-detail-box"> 
 
    <select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes" style="display: block;"> 
 
     <option value="">Select A Size</option> 
 
     <option value="small" class="attached enabled" >Small</option> 
 
     <option value="medium" class="attached enabled" >Medium</option> 
 
     <option value="large" class="attached enabled" >Large</option> 
 
     <option value="xl" class="attached enabled" >XL</option> 
 
     <option value="xxl" class="attached enabled">XXL</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 2

1）次の2つの文書準備の機能を必要としません。コンテンツを結合する。 （これは良い練習のために、すべてのエラーをスローしません。）

jQuery(document).ready(function() {} 

2）文字列が正しく行で閉じられていない、

jQuery('#bx .attr-detail-box select option[value="'+value+'"]').attr("selected", "selected"); 

は

jQuery('#bx .attr-detail-box select option[value = "' + value + '"]').attr("selected", "selected"); 

作業する必要がありますコードスニペット、

jQuery(document).ready(function() { 
    jQuery('.sck .attr-detail-box select').css("display", "none"); 
    jQuery('#bx .attr-detail-box select').css("display", "block"); 

    jQuery('select#selectsize').on('change', function() { 
    var value = this.value; 
    jQuery('#pa_size option[value = "' + value + '"]').attr("selected", "selected"); 
    jQuery('#bx .attr-detail-box select').css("display", "block"); 
    jQuery('#selectsize').css("display", "block"); 
    jQuery('#bx.single_add_to_cart_button').attr("class", "single_add_to_cart_button button alt wc-variation-selection-needed"); 
    }); 
});