Question

我有一个下拉值，当我更改另一个下拉列表中的选项时，该值会发生变化。

我尝试使用jquery，但它确实有效。

但是，当我尝试再次选择之前选择的选项时，它不会再次更改，它只会更改一次。

我必须刷新页面才能选择所需的选项。任何修复然后让我知道。

＆＃13;

<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>							
</div>

＆＃13;

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）您不需要两个文档就绪功能。结合内容。（这不会引起任何错误，但是为了良好的实践。）

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

通过另一个下拉值的更改下拉值更改

2 个答案: