0

Let's say you have a form:

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

However, you only want to display one of the two "dealers" select-options after you have chosen on of Volvo or Audi. The one that will be displayed is of course depending on which of Volvo and Audi was selected in the "cars" select-options.

What might be a good approach for this small issue?

Rergards, Bill

4

4 回答 4

1

有一种方法可以在不添加多个 id（并且没有类）的情况下执行此操作，如果需要，还可以让您添加更多经销商。首先，您需要使用 css 隐藏经销商选择下拉菜单。

然后将 'cars' 的 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();
});
于 2013-04-06T11:23:07.957 回答
1

一些答案已经为您提供了使用表单执行所需操作的脚本。但这是我的标记脚本版本。在此处查看示例 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;

  }      

});
});

该脚本比其他脚本大，但运行良好。该脚本根据基本原则运行。它首先检查汽车下拉菜单的值，并根据所选选项显示或隐藏其他下拉菜单。

于 2013-04-06T11:31:52.160 回答
0

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

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

http://jsfiddle.net/BncsJ/

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

于 2013-04-06T11:19:12.187 回答
0

鉴于您的标记，您可以做

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

于 2013-04-06T11:22:39.427 回答