如何在 php laravel 中添加依赖下拉脚本？

Question

我有 3 个下拉菜单。

1)国家 2)状态 3)城市

我创建了 3 个有条件的下拉菜单，

=>如果未选择国家/地区，则其他 2 个下拉菜单保持禁用状态。

=>国家选择后，只会启用州下拉菜单。

=>州和城市相应地显示他们的国家/地区。

你能纠正我的 javascript 吗？我认为只有 JAvascript 代码有问题！！！

代码如下：

<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 依赖下拉列表

请试试这个，如果你发现任何问题，请告诉我

在这里工作JS Fiddle。

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>