禁用基于类的选择元素选项

Disable a select element option based on a class

本文关键字：选择 元素 选项 于类      更新时间：2023-09-26

嘿，伙计们刚刚被告知，隐藏不能用于跨浏览器的选择元素选项。

所以我想知道如何使用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>

然后我有这些列表：

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

如果所选选项与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>

正如你所看到的，我有一点问题，因为类为"选择框模型"的第二个选择元素包含所有模型，我想禁用与第一个选择元素选项无关的选项。

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

<div class="makes BMW X5">

那么，我该如何禁用与"Make"无关的选项呢？例如，如果用户选择宝马作为第一个元素，我只想要与"Make"相关的"Models"。

任何例子都很好，谢谢。

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

但我假设你的意思是，如果你从选择一个(form control)中选择一个汽车品牌，那么可用的车型应该在选择两个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);
       }
     });
   }
});

这里有一个小提琴：http://jsfiddle.net/z59v56ec/

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

但如果你真的想按照自己的方式来做，那么下面的逻辑会更容易。

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

顺便说一句，小心你的推荐信。沃尔沃与沃尔沃不同。

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

首先，您最好创建多个选择，并根据第一个选择的selected值切换其显示。然后，创建多个div，并根据第二个select的selected值切换它们的显示。也就是说，如果你真的想"动态"攻击这一点，你最好有两个选择-和一个无序列表-并在进行时清除它们的内容和重写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;
    }
});

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

相关文章：