second dropdown value according to first dropdown using jquery

second dropdown value according to first dropdown using jquery

September 12, 2017

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
select{
width: 100px;
display: block;
margin: 10px;
}
</style>
<script>
$(document).ready(function(){

$('#one').change(function() {
    $('#two').prop('disabled', this.value == '0');


   $("#two option").each(function(){

   if($("#one option:selected").val() >= $(this).val())
            $(this).attr("disabled", "disabled");
        else

      $(this).removeAttr("disabled");

   });


}).change();

});
</script>
</head>

<body>
<select name="first" id="one">
<option disabled="disabled" selected="selected" value="0">Please</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select name="two" id="two">
<option disabled="disabled" selected="selected" value="0">Please</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

Comments