Question

嘿，大家刚被告知隐藏不能跨浏览器用于选择元素选项。

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

我目前正在使用这个jQuery隐藏div的类别＆＃39;制作＆＃39;如果所选的选项与div的类不匹配，例如＆＃39; BMW＆＃39;：

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

因为你可以看到我有一点问题，因为第二个选择元素的类为＆＃34; select-box-model＆＃34;包含所有模型，我想禁用与已选择的第一个选择元素选项无关的选项。

例如，列表容器包含＆＃39; Make＆＃39;的类。和＆＃39;模型＆＃39;每辆车：

<div class="makes BMW X5">

那么我怎样才能禁用与那些＆＃39; Make＆＃39;无关的选项，例如，如果用户选择BMW作为第一个元素我只是喜欢＆＃39;模型＆＃39; 39;与＆＃39; Make＆＃39;。

相关联

任何例子都很棒，谢谢。

Answer 1

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

但我假设您的意思是，如果您从选择的(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来填充汽车品牌的模型。

但如果您真的想按照自己的方式去做，那么以下逻辑就更容易了。

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

在旁注中，请注意您的参考资料。 VOLVO与沃尔沃不同。

万一我完全错过了这一点 - 对不起！：）

Answer 2

首先，您最好根据您的第一个选择的选择值创建多个选择并切换显示。然后，您创建多个div并根据第二个选择的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;
    }
});

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

禁用基于类的select元素选项

2 个答案: