how to add dependent dropdown script in php laravel?

Question

I have 3 dropdown.

1)Country 2)State 3)City

I created 3 dropdown,that having conditions,

=>IF country is not selected,other 2 drop down remain disabled.

=>After country is select, only state dropdown will enable.

=>State and City shown accordingly their country.

Are you able to correct my javascript?I think there is only something wrong in JAvascript code !!!

Here is the code:

<script>

    $(function(){

  var $supcat = $("#selectCountry"),
      $cat = $("#selectState"),
      $subcat = $(".subcat");


      $supcat.on("change",function(){
        var _rel = $(this).val();
        $cat.find("option").attr("style","");
        $cat.val("");
        if(!_rel) return $cat.prop("disabled",true);
        $cat.find("[rel~='"+_rel+"']").show();
        $cat.prop("disabled",false);
      });

         $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").attr("style","");
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel~='"+_rel+"']").show();
        $subcat.prop("disabled",false);
      });
});
</script>

subcat option{
  display:none;
}

.subcat option.label{
  display:block;
}

<div class="col-md-auto" id="countryDiv">
                    <select class="custom-select" id="selectCountry" name="selectCountry">
                            <option disabled selected="">-Counrty-</option>
                            <option value="0">In</option>
                            <option value="1">US</option>
                            <option value="2">UK</option>
                    </select>
                </div>
                <div class="col-md-auto" id="stateDiv">             
                    <select class="custom-select"  id="selectState" name="selectState" class="subcat" disabled="disabled">
                            <option disabled selected="">-State-</option>
                            <option rel="0" value="00">gujarat</option>
                            <option rel="0" value="01">Maharashtra</option>
                            <option rel="1" value="10">Us state -1</option>
                            <option rel="1" value="11">Us state -2</option>
                            <option rel="2" value="20">Uk state -1</option>
                            <option rel="2" value="21">Uk state -1</option>
                    </select>
                </div>
                <div class="col-md-auto" id="cityDiv">
                    <select class="custom-select" id="selectCity" name="selectCity" class="subcat" disabled="disabled">
                            <option disabled selected="">-City-</option>
                            <option rel="00" value="000">Rajkot</option>
                            <option rel="00" value="001">Pbr</option>

                            <option rel="01" value="001">Mumbai</option>                    
                            <option rel="01" value="001">goregav</option>

                            <option rel="10" value="110">Us city 1</option>             
                            <option rel="10" value="111">Us city 2</option>

                            <option rel="20" value="220">Uk city 1</option>
                            <option rel="20" value="221">Uk city 2</option>

                    </select>
                </div>

Answer 1

jQuery Dependent DropDown List

Please try this and let me know if you find any issue

Working JS Fiddle here.

var $select1 = $( '#select1' ),
        $select2 = $( '#select2' ),
    $options = $select2.find( 'option' );

$select1.on( 'change', function() {
    $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

option {
  margin: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6">
  <select class="form-control" name="select1" id="select1">
    <option value="1">India</option>
    <option value="2">USA</option>
    <option value="3">Russia</option>
  </select>
</div>
<div class="col-xs-6">
  <select class="form-control" name="select2" id="select2">
    <option value="1">Gujarat</option>
    <option value="1">Karnataka</option>
    <option value="1">Delhi</option>
    <option value="2">Texas</option>
    <option value="2">California</option>
    <option value="3">Balakhna<option>
</select>
</div>