CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Chris
Chris

Reputation: 441

How to reset dropdown box in jquery (select2)?

I have the following code:

https://jsfiddle.net/rmxpq2z0/

<div class="swiper-pagination"></div>
<div id="quote-form" class="quote-form">
<div class="container">
<div class="range range-xs-center range-lg-right">
  <div class="cell-xs-10 cell-sm-8 cell-lg-5 text-left offset-top-0">
    <div class="inset-lg-left-70">
      <div class="quote-form-body">
        <a href="" data-custom-toggle="quote-form" class="close icon icon-xxs fa-close text-white"></a>
        <div>
          <h3 class="text-bold">Get a FREE Quote!</h3>
        </div>
        <div class="offset-top-25">
          <p>Please select your repair from the drop down boxes for an instant quote.</p>
        </div>
        <div class="offset-top-20">
          <div class="form-group">
            <select data-minimum-results-for-search="Infinity" class="form-control select-filter" id="console">
              <option value="selectconsole">Select My Console</option>
              <option value="ps4">PS4</option>
              <option value="xboxone">Xbox One</option>
            </select>
          </div>
          <div class="form-group">
            <select data-minimum-results-for-search="Infinity" class="form-control select-filter" id="model">
            </select>
          </div>
          <a href="calculate.html" class="btn btn-sm btn-primary">Get My Quote</a>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>




<script>

ps4models = new Array("Select My Model", "PS4 (Release Model)", "PS4 Slim", "PS4 Pro");
xboxonemodels = new Array("Select My Model", "Xbox One (Release Model)", "Xbox One Slim", "Xbox One Scorpio");

populateSelect();

$(function() {

  $('#console').change(function() {
    populateSelect();
  });

});

function populateSelect() {
  console = $('#console').val();
  $('#model').empty();
  $('#model').html('');

  if (console == 'ps4') {
    ps4models.forEach(function(t) {
      $('#model').append('<option>' + t + '</option>');
      $('#model').trigger("chosen:updated");
      $('#model').find('option:first').attr('selected', 'selected');
    });
  }

  if (console == 'xboxone') {
    xboxonemodels.forEach(function(t) {
      $('#model').append('<option>' + t + '</option>');
      $('#model').trigger("chosen:updated");
      $('#model').find('option:first').attr('selected', 'selected');
    });
  }

</script>

It works perfectly in the jsfiddle, but when I post the code to the website, it doesn't work.

It DOES populate the dropdown box, but it won't auto select the first option in the second box, and it won't remove any previous option that was selected.

For example, if I select an option in the first box, the second box stays empty until I select something. The first option should be auto selected. Also if I select something in the second box, and then change the selection in the first box, the second box option stays there, instead of being reset.

It is the EXACT same code, no changes at all. Is it possible the CSS is interfering with it?

Any help would be greatly appreciated.

UPDATE

Thanks to DanielH! It turns out the template was using Select2 jquery plugin. His code worked perfectly.

Upvotes: 1

Views: 542

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

Solution 1:

Since you are using select2, add $('#model').change(); at the end of your console dropdown's select2 config should trigger the update every time you update the model dropdown list.

Solution 2:

If you have no control over the select2 or not sure where to find it, the following also gonna work, add a onchange event to the parent dropdown console:

$( document ).ready(function() {
   $('#console').on('change', function(){
      $('#model').val('selectmodel');
      $('#model').change();
   })
});

Upvotes: 1

Related Questions