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();
        $r = $( "#mydp option[value='r']" );
$( "#mydp option[value='']" ).prop("selected", "selected");
        $r.nextAll().andSelf().hide();
        $r.prevUntil( "#mydp option[value='']" ).show();
    } 
    else if(this.value == "y") {
        $( "#mydp option[value='']" ).prop("selected", "selected");
        $("#mydp").parent().show();
        $r = $( "#mydp option[value='r']" );
        $r.nextAll().andSelf().show();
        $r.prevUntil( "#mydp option[value='']" ).hide();
    } 
    else {
         $("#mydp").parent().hide();
    }
});