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

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

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

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

http://jsfiddle.net/BncsJ/

所以，如果我选择奥迪我只想看到奥迪经销商，我不需要别人。

Answer 2

鉴于您的标记，你可以做

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

Answer 3

有这样做的方式，而不添加多个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 4

一些答案已经给你的脚本做什么你想要的形式。但这是我的版本的脚本为您的标记。 这里检查 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; 

    }  

}); 
}); 

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