Drop down value change with the change on another dropdown value

Question

I have a drop down value that changes when i change the options on another dropdown.

I tried with jquery and it works.

However when i try to select again the previously selected option it does not change again, it changes only once.

I have to refresh the page to select the desired option. Any fix then let me know.

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

Find here: [Populate one dropdown based on selection in another](https://stackoverflow.com/questions/5686735/populate-one-dropdown-based-on-selection-in-another]) — Rohit Sharma, Aug 11 '17 at 06:09

score 0 · Answer 1 · edited Aug 11 '17 at 06:10

There are few mistakes in above code.

1) Your other select option selector is not valid. jQuery('#bx .attr-detail-box select option[value="'+value+'"]').attr("selected", "selected"); but #bx div is parent of .attr-detail-box.

2) I've added some missing )} in code.

$(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>

It would helpful if you explain what you've changed instead of just fixing the code - you can't learn much from copy/paste — StudioTime, Aug 11 '17 at 06:06

CCoder · Answer 2 · 2017-08-11T06:24:11.163

1) You don't need two document ready functions. Combine the content. (This doesn't throw any error, but for good practice.)

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

2) String is not properly closed in the line,

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

Should be

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

Working Code snippet,

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

Drop down value change with the change on another dropdown value

2 Answers2