JSFiddle - React, Tailwind, and code Playground

by Mahendran Sakkarai

HTML

<select id="SearchForm_min_cost" name="SearchForm[min_cost]">
<option value="0"></option>
<option value="1">10 lakhs</option>
<option value="2">20 lakhs</option>
<option value="3">30 lakhs</option>
<option value="4">40 lakhs</option>
<option value="5">50 lakhs</option>
<option value="6">60 lakhs</option>
<option value="7">70 lakhs</option>
<option value="8">80 lakhs</option>
<option value="9">90 lakhs</option>
<option value="10">1 crores</option>
<option value="11">2 crores</option>
<option value="12">3 crores</option>
<option value="13">4 crores</option>
<option value="14">5 crores</option>
</select>

<select id="SearchForm_max_cost" name="SearchForm[max_cost]">
<option value="0"></option>
<option value="1">10 lakhs</option>
<option value="2">20 lakhs</option>
<option value="3">30 lakhs</option>
<option value="4">40 lakhs</option>
<option value="5">50 lakhs</option>
<option value="6">60 lakhs</option>
<option value="7">70 lakhs</option>
<option value="8">80 lakhs</option>
<option value="9">90 lakhs</option>
<option value="10">1 crores</option>
<option value="11">2 crores</option>
<option value="12">3 crores</option>
<option value="13">4 crores</option>
<option value="14">5 crores</option>
</select>

JavaScript

// Keep a copy of the default options
var $options = $('#SearchForm_min_cost').children().clone();


$('#SearchForm_min_cost').change(function(){
// Within your change handler:

var index = $(this).find(':selected').index();
$('#SearchForm_max_cost').html($options).children(':lt('+index+')').remove();

});