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

我有3个下拉菜单。

1)国家2)州3)城市

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

=>如果没有选择国家,其他两个下拉菜单将被禁用。

=>选择国家后,只有州的下拉菜单会被激活。

=>州和城市的显示与他们的国家相对应。

你能纠正我的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>

解决方案:

jQuery Dependent DropDown List

请试一试,如果你发现任何问题,请告诉我。

工作 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>

Dropdown screenshot

Js

O/p

给TA打赏
共{{data.count}}人
人已打赏
未分类

为什么OpenSSL工具可以成功验证一个未签名的文件?

2022-9-9 14:07:39

未分类

使用Jquery 3.4.1无法设置下拉菜单的选定属性,c# mvc [重复] 。

2022-9-9 14:07:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索