Question

假设你有一个表格：

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

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

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

Rergards，比尔

Answer 1

有一种方法可以在不添加多个ID（也没有类别）的情况下执行此操作，这样您还可以根据需要添加更多经销商。首先，您需要隐藏经销商选择带有css的下拉列表。

然后在汽车中添加“汽车”ID：

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

然后使用jQuery完成剩下的工作：

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

Answer 2

有些答案已经为您提供了使用表单执行所需操作的脚本。但这是我的标记脚本版本。点击这里查看示例 http://jsbin.com/omuboq/1/edit

$(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;

  }      

});
});

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

Answer 3

最自然的是，一次只显示相应的经销商并隐藏其他经销商：

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

http://jsfiddle.net/BncsJ/

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

Answer 4

鉴于您的标记，您可以

$(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"); 
});

以下是jsFiddle

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

4 个答案: