下拉值的變化與另一個下拉值的變化

-1

我有一個下拉的值，當我改變另一個下拉選項的變化。下拉值的變化與另一個下拉值的變化

我試過用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>

來源

2017-08-11 SandeepTete

找到這裏：[根據選擇填充一個下拉列表在另一個]（https://stackoverflow.com/questions/5686735/populate-one-dropdown-based-on-selection-in-another]） –

有在上面的代碼中一些錯誤。

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>

來源

2017-08-11 06:04:30

這將有所幫助，如果你解釋你已經改變，而不是僅僅修復代碼 - 你不能從複製/粘貼中學到很多 –

@DarrenSweeney更改添加 –

1）你並不需要兩個文件準備好功能。組合內容。（這不會引發任何錯誤，但對好的做法。）

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

來源

2017-08-11 06:18:27 CCoder

下拉值的變化與另一個下拉值的變化

回答

相關問題