Hide option when selected option has value

Question

I want to hide the option with the value "completed" when the option with value wc-pending is selected.

Whats the best approach to do this?

<select id="order_status" name="order_status" class="select2”>
<option value="wc-enquiry">Offerte</option>
<option value="wc-pending" selected="selected">Pending payment</option>
<option value="wc-processing">Processing</option>
<option value="wc-on-hold">On hold</option>
<option value="wc-completed">Completed</option>
<option value="wc-cancelled">Cancelled</option>
<option value="wc-refunded">Refunded</option>
<option value="wc-failed">Failed</option>                           
</select>

Does this answer your question? [jQuery Get Selected Option From Dropdown](https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — Reporter, Oct 19 '20 at 11:42

score 1 · Accepted Answer · answered Oct 19 '20 at 11:45

This would be a one way to do it but it does not include any check when the select is being changed.

if ($('#order_status option[value="wc-pending"]').is(":selected")) {
  $('#order_status option[value="wc-completed"]').hide()
}

Demo

if ($('#order_status option[value="wc-pending"]').is(":selected")) {
  $('#order_status option[value="wc-completed"]').hide()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="order_status" name="order_status" class="select2">
  <option value=" wc-enquiry ">Offerte</option>
  <option value="wc-pending" selected="selected ">Pending payment</option>
  <option value="wc-processing ">Processing</option>
  <option value="wc-on-hold ">On hold</option>
  <option value="wc-completed">Completed</option>
  <option value="wc-cancelled ">Cancelled</option>
  <option value="wc-refunded ">Refunded</option>
  <option value="wc-failed ">Failed</option>
</select>

Hide option when selected option has value

1 Answers1