JSFiddle - React, Tailwind, and code Playground
HTML
<!--<select name="test1" id="test1">
<option value="Select">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
<option value="a">a</option>
<option value="a">b</option>
<option value="a">c</option>
<option value="b">1</option>
<option value="b">2</option>
<option value="b">3</option>
<option value="c">c</option>
</select>-->
<select name="test1" id="test1">
</select>
<select id="test2" name="test2">
</select>
JavaScript
var department = [
{ id: "", name: "" },
{ id: "Product Development", name: "Product Development" },
{ id: "Sales", name: "Sales" },
{ id: "Success", name: "Success" },
{ id: "Marketing", name: "Marketing" },
{ id: "BizOps", name: "BizOps" },
{ id: "Growth", name: "Growth" },
{ id: "People Operations", name: "People Operations" },
{ id: "Finance", name: "Finance" },
{ id: "Operations", name: "Operations" }
/*{ id: "Product Design", name: "Product Design" },
{ id: "Product Mgmnt Inc", name: "Product Mgmnt Inc" }*/
];
$(department).each(function () {
var doption = new Option(this.name,this.id);
//Add the Option element to DropDownList.
$('#test1').append(doption);
});
var manager = [
{ id: "", name: "" },
{ id:"[email protected]",name:"Norm Chenard" },
{ id:"[email protected]",name:"Jason Ross" },
{ id:"[email protected]",name:"Justine Burns" },
{ id:"[email protected]",name:"Nick Keyko" },
{ id:"[email protected]",name:"Abheek Dhawan" },
{ id:"[email protected]",name:"Ben Zittlau" },
{ id:"[email protected]",name:"Danielle Strang" },
{ id:"[email protected]",name:"Darren Wood" },
{ id:"[email protected]",name:"Sam Pillar/ Forrest Ziesler" }
];
$(manager).each(function () {
var moption = new Option(this.name,this.id);
//Add the Option element to DropDownList.
$('#test2').append(moption);
});
$('#test1').on('change', function() {//alert($(this).val());
switch($(this).val()){
case "Product Development":
$('#test2 option:not(option[value="[email protected]"])').hide();
$('#test2 option[value="[email protected]"]').show();
break;
case "Sales":
$('#test2 option:not(option[value="[email protected]"])').hide();
$('#test2 option[value="[email protected]"]').show();
break;
case "Success":
$('#test2 option:not(option[value="[email protected]"])').hide();
...