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

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

解决这个小问题的好方法是什么？

请问，账单

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