Javascript 基于类禁用“选择元素”选项

嘿，伙计们刚刚被告知，不能在跨浏览器中使用“隐藏”来选择元素选项

因此，我想知道如何使用disable来解决以下问题

这个例子是简化的，实际的代码包含PHP循环和MySQL来显示选项和内容

好的，首先我有两个选择元素：

<select class="form-control select-box">
    <option value="make-any">Make (Any)</option>
    <option value="BMW">BMW</option>
    <option value="Mercedes">Mercedes</option>
    <option value="Volvo">Volvo</option>
</select>

<select class="form-control select-box-model">
    <option value="make-any">Make (Any)</option>
    <option value="C220">C220</option>
    <option value="X1">X1</option>
    <option value="X5">X5</option>
    <option value="XC90">XC90</option>
</select>

制造（任何）
宝马
梅赛德斯
沃尔沃汽车
制造（任何）
C220
X1
X5
XC90

然后我有以下清单：

<div class="makes BMW X1">
 <ul>
  <li>BMW</li>
  <li>X1</li>
 </ul>
</div>

<div class="makes VOLVO XC90">
 <ul>
  <li>VOLVO</li>
  <li>XC90</li>
 </ul>
</div>

<div class="makes MERCEDES C220">
 <ul>
  <li>MERCEDES</li>
  <li>C220</li>
 </ul>
</div>

<div class="makes BMW X5">
 <ul>
  <li>BMW</li>
  <li>X1</li>
 </ul>
</div>

宝马
X1


沃尔沃
XC90


梅赛德斯
C220


宝马
X1

如果所选选项与div的类不匹配，我当前使用此jQuery隐藏具有“make”类的div，例如“BMW”：

<script>
    $(document).ready(function(){
  $('.form-control').change(function(){
    var make = $(this).val();
    if(make != 'make-any'){
      $('.makes').hide();
      $('.'+make).show();
      } else {
        $('.makes').show();
        }
    });
  });</script>

$（文档）.ready（函数（）{
$（'.form control'）.change（函数（）{
var make=$（this.val（）；
如果（make！=“make any”）{
$（'.make'）.hide（）；
$（'.+make.show（）；
}否则{
$（'.makes'）.show（）；
}
});
});

因此，正如您所看到的，我有一点问题，因为第二个select元素的“select box model”类包含所有的模型，我想禁用与第一个select元素选项无关的选项

例如，列表容器包含每辆车的“品牌”和“型号”类别：

<div class="makes BMW X5">

因此，我如何禁用与该“品牌”无关的选项，例如，如果用户选择BMW作为第一个元素，我只喜欢与该“品牌”关联的“车型”

---

任何例子都很好，谢谢。

嗯，我不能完全肯定我是否理解了你的问题

但我假设您的意思是，如果您从select one

（表单控制）

中选择一个汽车品牌，则应在select two

select box model

中启用可用车型。选择模型后，需要显示准确的div

如果这就是您要做的，那么您的标记并不是实现这一点的最佳结构

尽管如此，我还是用你的分数做了一个例子：

jQuery：

$('.select-box-model').prop('disabled',true); 
$('.form-control').on('change',function(){
  $('.select-box-model').prop('disabled',false);
  if($(this).val() != 'make-any'){
    $('.makes').hide();           

    //check if the models drop down is used
    if($(this).hasClass('select-box-model')){
       //get selected value
        var value = $(this).val();
        $('.'+ value).show();
        return false;
        }

    //get selected value
    var carBrand = $(this).val();
    $('.select-box-model option').prop('disabled',true);
    $('.'+ carBrand).find('li').each(function(){

    if($.trim(carBrand) != $.trim($(this).text())){
        $('.select-box-model option[value="'+ $(this).text() +'"]').attr("disabled", false);
       }
     });
   }
});

这里有一把小提琴：

实现这一点的一个更简洁的解决方案是使用ajax填充汽车品牌的模型

但是如果你真的想按自己的方式去做，那么下面的逻辑就更简单了

• 选择一个拥有汽车品牌价值的品牌
• 选择两个汽车品牌的价值，文本为车型
• 选择一将启用选择二中具有该汽车品牌价值的选项
• 在“选择两个”中选择一个模型时，将根据选项文本显示准确的div

另一方面，要小心你的推荐信。沃尔沃与沃尔沃不同

---

以防万一，我完全没有抓住要点——对不起！：）

首先，最好创建多个选择并根据第一个选择的selectedvalue切换其显示。然后，创建多个div并根据第二个select的selectedvalue切换其显示。这就是说，如果您真的想“动态”地攻击这个问题，最好是选择两个选项（和一个无序列表），然后清除它们的内容并在运行时重写html：

<select class="form-control select-box" id="selectMake">
   <option value="make-any">Make (Any)</option>
   <option value="BMW">BMW</option>
   <option value="Mercedes">Mercedes</option>
   <option value="Volvo">Volvo</option>
</select>

<select class="form-control select-box-model" id="selectModel">
</select>

<ul id="ulCars">
</ul>

$("#selectMake").change(function(){
    $("#selectModel").empty();
    $("#ulCars").empty();

    switch ($(this).val()){
        case "BMW":
            $("#selectModel").append("<option>X1</option>").val("X1");
            $("#ulCars").append("<li>X1</li>");
        break;
    }
});

制造（任何）
宝马
梅赛德斯
沃尔沃汽车


$（“#selectMake”）.change（函数（）{
$（“#选择模型”）.empty（）；
$（“#ulCars”）.empty（）；
开关（$（this.val（））{
案例“宝马”：
$（“#选择模型”）.append（“X1”）.val（“X1”）；
$（“#ulCars”）。追加（“
X1
”；
打破
}
});

---

等等，但您可以轻松地清除列表和下拉列表，然后重新填充它们。但正如我所说，我会选择多个div并切换它们的显示。

您最好为每个品牌创建一个单独的选择列表，而不是尝试将每个品牌的所有模型组合在一个选择列表中。然后，您可以通过选择列表而不是选项来显示/隐藏。或者将选项值保留在一个数组中，并从中填充选择。