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

Question

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

所以我想知道如何使用禁用来解决我遇到的以下问题。

此示例经过简化，实际代码包含 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 的类不匹配，例如“BMW”，我当前正在使用此 jQuery 隐藏具有“makes”类的 div:

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

正如您所看到的，我遇到了一些问题，因为具有“select-box-model”类的第二个选择元素包含所有模型，我想禁用不关联的选项与已选择的第一个选择元素选项。

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

<div class="makes BMW X5">

那么我如何禁用与该“品牌”无关的选项，例如，如果用户选择 BMW 作为第一个元素，我只需要与“品牌”关联的“型号”。

任何例子都很好，谢谢。

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);
       }
     });
   }
});

这是一个 fiddle :http://jsfiddle.net/z59v56ec/

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

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

• 选择一个具有汽车品牌值(value)的产品
• 选择两个具有值(value)的汽车品牌，文字为车型
• 选择其中一项将启用选择两项中具有该汽车品牌值(value)的选项
• 在选择两个模型时，将根据选项文本显示准确的 div。

顺便说一句，请小心您的引用文献。 VOLVO 与沃尔沃不同。

以防万一我完全错过了重点 - 抱歉! :)