如何使用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; 

    }  

}); 
}); 

的腳本是比別人都大，但效果很好的例子。該腳本基於一個基本原則運行。它首先檢查汽車下拉菜單的值，並根據選定的選項顯示或隱藏其他下拉菜單。