CODEWITHSUNDEEP
javascriptjquery
Efoskhi
Efoskhi

Reputation: 61

How to reset multiple select to its first value in Jquery

I have a select which contains options, I want to be able to resent each of the select to its first value onclick

$('.reset').on('click', function() {
  $('food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <select class="food">
    <option value="" selected disabled>Select Food</option>
    <option value="rice">Rice</option>
    <option value="garri">Garri</option>
  </select>
  <input type="text" class="showfood">
  <button class="reset">Reset Select</button>
</div>

<div class="box">
  <select class="food">
    <option value="" selected disabled>Select Food</option>
    <option value="beans">Beans</option>
    <option value="pear">pear</option>
  </select>
  <input type="text" class="showfood">
  <button class="reset">Reset Select</button>
</div>

However, what this does is reset only the first select.

Upvotes: 1

Views: 417

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

Your logic to reset is correct. The issue you have is that you need to find only the option related to the select within the same container as the clicked button. To achieve that you can use closest() and find(), like this:

$('.reset').on('click', function() {
  $(this).closest('.box').find('.food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <select class="food">
    <option value="" selected disabled>Select Food</option>
    <option value="rice">Rice</option>
    <option value="garri">Garri</option>
  </select>
  <input type="text" class="showfood">
  <button class="reset">Reset Select</button>
</div>
<div class="box">
  <select class="food">
    <option value="" selected disabled>Select Food</option>
    <option value="beans">Beans</option>
    <option value="pear">pear</option>
  </select>
  <input type="text" class="showfood">
  <button class="reset" type="button">Reset Select</button>
</div>

Upvotes: 1

Related Questions