Javascript 如何使用jQuery在表单中显示更多选项？

假设您有一个表单：

<form>
  <select name="cars">
    <option value="all">All Cars</option>
    <option value="volvo">Volvo</option>
    <option value="audi">Audi</option>
  </select>

  <select name="volvo_dealers">
    <option value="dealer1">Volvo Dealer 1</option>
    <option value="dealer2">Volvo Dealer 2</option>
  </select>

  <select name="audi_dealers">
    <option value="dealer1">Audi Dealer 1</option>
    <option value="dealer2">Audi Dealer 2</option>
  </select>

  <input type="submit" value="Submit">

</form>

所有汽车
沃尔沃汽车
奥迪
沃尔沃经销商1
沃尔沃经销商2
奥迪经销商1
奥迪经销商2

但是，在选择了沃尔沃或奥迪之后，您只想显示两个“经销商”选择选项中的一个。显示的内容当然取决于在“汽车”选择选项中选择的沃尔沃和奥迪

对于这个小问题，什么可能是一个好方法

雷加德斯，

---

比尔

最自然的做法是一次只显示对应的经销商，而隐藏其他经销商：

$('.cars').change(function() {
    $('.dialers').hide().filter('[name="' + $(this).val() + '_dealers"]').show();
});

---

因此，如果我选择奥迪，我只想看到奥迪经销商，我不需要其他经销商。

鉴于您的标记，您可以这样做

$(function(){
    $("select[name=cars]").change(function(){
        if ($(this).val() == "volvo") {
            $("select[name=volvo_dealers]").show();
            $("select[name=audi_dealers]").hide();
        } else if (($(this).val() == "audi")) {
            $("select[name=audi_dealers]").show();
            $("select[name=volvo_dealers]").hide();
        } else {
            $("select[name=volvo_dealers]").hide();
            $("select[name=audi_dealers]").hide();
        }
    });
   $("select[name=cars]").trigger("change"); 
});

---

这里是

有一种方法可以做到这一点，而无需添加多个id（且无类别），如果需要，还可以添加更多经销商。首先，您需要使用css隐藏经销商选择下拉列表

然后将“cars”的id添加到cars选项中：

<select name="cars" id="cars">
    <option value="all">All Cars</option>
    <option value="volvo">Volvo</option>
    <option value="audi">Audi</option>
  </select>

---

一些答案已经为您提供了脚本，可以对表单执行您想要的操作。但这是我为您的标记编写的脚本版本。 在这里检查一个例子

该脚本比其他脚本大，但效果很好。此脚本基于一个基本原则运行。它首先检查cars下拉菜单的值，并根据所选选项显示或隐藏其他下拉菜单

$('#cars option').click(function(){
  var car = $(this).attr('value');
  $('select.' + car + '_dealers').show();
});

$(document).ready(function(){
$('form').change(function(){

var selectOp = $("form select[name='cars']").val();

  switch(selectOp)  { 

    case 'volvo' :
  $("form select[name='audi_dealers']").hide();
  $("form select[name='volvo_dealers']").show();
  break;

    case 'audi':
  $("form select[name='volvo_dealers']").hide();
  $("form select[name='audi_dealers']").show();  
  break;


  case 'all' :
    $("form select[name='audi_dealers']").show();
    $("form select[name='audi_dealers']").show();
    break;

  }      

});
});