JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<select id="change">
<option value="-1">sel</option>
<option value="x">x</option>
<option value="y">y</option>
</select>
<p>
<select id="mydp">
  <option value="">&nbsp;</option>
    <option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
<option value="l">l</option>
<option value="m">m</option>
<option value="n">n</option>
<option value="o">o</option>
<option value="p">p</option>
<option value="q">q</option>
<option value="r">r</option>
<option value="s">s</option>
<option value="t">t</option>
<option value="u">u</option>
<option value="v">v</option>
<option value="w">w</option>
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
<option value="ee">ee</option>
<option value="ff">ff</option>
<option value="gg">gg</option>
<option value="hh">hh</option>
<option value="ii">ii</option>
<option value="jj">jj</option>
<option value="kk">kk</option>
</select>
</p>

JavaScript

$("#change").change(function() {
    if(this.value == "x") {
        $("#mydp").parent().show();
       $( "#mydp option[value='r']" ).nextAll().andSelf().css("display", "none");
         $( "#mydp option[value='r']" ).prevUntil( "#mydp option[value='']" ).css("display", "initial");
    } else if(this.value == "y") {
          $("#mydp").parent().show();
      $( "#mydp option[value='r']" ).nextAll().andSelf().css("display", "initial");
         $( "#mydp option[value='r']" ).prevUntil( "#mydp option[value='']" ).css("display", "none");
         
    } else {
         $("#mydp").parent().hide();
    }
});