JSFiddle - React, Tailwind, and code Playground

by shyam kumar

HTML

<select id="cmb1">
    <option value="X">X</option>
    <option value="L">L</option>
    <option value="M">M</option>
</select>
<select id="cmb2">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
</select>
<select id="cmbOperator">
    <option value="100">X / Red</option>
    <option value="199">L / Red</option>
    <option value="299">M / Red</option>
    <option value="300">X / Green</option>
    <option value="311">L / Green</option>
    <option value="322">M / Green</option>
</select>
<button id="btn">Button</button>


<select class="dropDownList" id="PersonFunction">
    <option value="">Choose</option>
    <option value="1">Vice President</option>
    <option value="2">Director</option>
    <option value="3">Secretary</option>
    <option value="4">Clerk</option>
</select>
<select class="dropDownList" id="PersonFunction1">
    <option value="">Choose</option>
    <option value="1">Vice President</option>
    <option value="2">Director</option>
    <option value="3">Secretary</option>
    <option value="4">Clerk</option>
</select>

JavaScript

$(document).ready(function () {
    $('#cmb1,#cmb2').change(function () {
    var name = $('#cmb1').find(":selected").text();
    var name2 = $('#cmb2').find(":selected").text();
        //var name ="$('#cmb1 option:selected'). val()";
        //var name2 ="$('#cmb2 option:selected'). val()";
        $("#cmbOperator option:contains(" + name +' / '+ name2 + ")").attr('selected', true).siblings().removeAttr('selected');
    });
});


$('#PersonFunction').on('change', function() {
  $('option:selected', this).attr('selected',true).siblings().removeAttr('selected');
});
$('#PersonFunction1').on('change', function() {
  $('option:selected', this).attr('selected',true).siblings().removeAttr('selected');
});