JSFiddle - React, Tailwind, and code Playground

by rubasingha

HTML

Remove drop down options when the data already set from the backend.
<br />
<select id="dropdownOne">
    <option  value="0" selected>Select Location</option>
    <option value="1">Galle</option>
    <option value="2">Colombo</option>
    <option value="3">Matara</option>
    <option value="4">Badulla</option>
</select>
<br />
<br /> Remove drop down option when user change the drop down list values.
<br /> If you need to remove all the options other than selected, then you can use this
<br /> In this example, If user select Apples, then it remove Grapes, Bananas and Oranges and remain Select fruit and Apples.
<br /> If you want to remove Select fruit option also, You can remove :eq(0) from onChange function.
<br />
<select id="dropdownTwo">
  <option value="0" selected>Select fruit</option>
  <option value="1">Grapes</option>
  <option value="2">Bananas</option>
  <option value="3">Oranges</option>
  <option value="4">Apples</option>
</select>

JavaScript

$(document).ready(function() {
  $('#dropdownOne').val(1);
  $('#dropdownOne option', this).not(':selected').remove();
});

$(document).on('change', '#dropdownTwo', function() {
  $('option', this).not(':eq(0), :selected').remove();
});