动态选择jQuery

时间：2016-01-26 08:18:39

标签： jquery

我正在尝试基于两个或更多动态选择来填充表单，这看起来像这样： dynamic selection

我的代码看起来像这样：

(function() {
  'use strict';
  $('#maker').change(function() {
    $('.filterModel').hide();
    $('#' + $(this).val()).show();
  });
  $('#model').change(function() {
    $('.filterForm').hide();
    $('#' + $(this).val()).show();
  });
}());
.filterModel {
  display: none;
}
.filterForm {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="maker" size="6">
  <option value="">Choose model</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="mb">MB</option>
</select>

<div id="audi" class="filterModel">
  <select id="model" size="6">
    <option value="">Choose Model</option>
    <option value="a1">A1</option>
    <option value="a3">A3</option>
    <option value="a4">A4</option>
    <option value="a6">A6</option>
    <option value="a7">A7</option>
  </select>
</div>

<div id="bmw" class="filterModel">
  <select id="model" size="6">
    <option value="">Choose Model</option>
    <option value="118">118</option>
    <option value="320">320</option>
    <option value="540">540</option>
    <option value="750">750</option>
    <option value="x6">X6</option>
  </select>
</div>

<div id="mb" class="filterModel">
  <select id="model" size="6">
    <option value="">Choose Model</option>
    <option value="aclass">A class</option>
    <option value="bclass">B class</option>
    <option value="eclass">E class</option>
    <option value="mlclass">ML class</option>
    <option value="slclass">SL class</option>
  </select>
</div>

<div class="filterForm" id="a1">
  <p>Audi A1 selected</p>
</div>
<div class="filterForm" id="a3">
  <p>Audi A3 selected</p>
</div>
<div class="filterForm" id="a4">
  <p>Audi A4 selected</p>
</div>
<div class="filterForm" id="a6">
  <p>Audi A6 selected</p>
</div>
<div class="filterForm" id="a7">
  <p>Audi A7 selected</p>
</div>
<div class="filterForm" id="118">
  <p>BMW 118 selected</p>
</div>
<div class="filterForm" id="320">
  <p>BMW 320 selected</p>
</div>
<div class="filterForm" id="540">
  <p>BMW 540 selected</p>
</div>
<div class="filterForm" id="750">
  <p>BMW 750 selected</p>
</div>
<div class="filterForm" id="x6">
  <p>BMW X6 selected</p>
</div>
<div class="filterForm" id="aclass">
  <p>MB A class selected</p>
</div>
<div class="filterForm" id="bclass">
  <p>MB B class selected</p>
</div>
<div class="filterForm" id="eclass">
  <p>MB E class selected</p>
</div>
<div class="filterForm" id="mlclass">
  <p>MB ML class selected</p>
</div>
<div class="filterForm" id="slclass">
  <p>MB SL class selected</p>
</div>

现在，当我在制造商中选择第二个选项并尝试选择模型时，没有任何反应，无法理解这一点。也许有更好的解决方案来完成这样的任务？谢谢你的帮助。

3 个答案:

答案 0 :(得分：1)

重复的ids model。

将其改为班级。

下面的工作片段。

＆＃13;
＆＃13; 
(function() {
  'use strict';
  $('#maker').change(function() {
    $('.filterModel').hide();
    $('#' + $(this).val()).show();
  });
  $('.model').change(function() {
    $('.filterForm').hide();
    $('#' + $(this).val()).show();
  });
}());
＆＃13; 
.filterModel {
  display: none;
}
.filterForm {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="maker" size="6">
  <option value="">Choose model</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="mb">MB</option>
</select>

<div id="audi" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="a1">A1</option>
    <option value="a3">A3</option>
    <option value="a4">A4</option>
    <option value="a6">A6</option>
    <option value="a7">A7</option>
  </select>
</div>

<div id="bmw" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="118">118</option>
    <option value="320">320</option>
    <option value="540">540</option>
    <option value="750">750</option>
    <option value="x6">X6</option>
  </select>
</div>

<div id="mb" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="aclass">A class</option>
    <option value="bclass">B class</option>
    <option value="eclass">E class</option>
    <option value="mlclass">ML class</option>
    <option value="slclass">SL class</option>
  </select>
</div>

<div class="filterForm" id="a1">
  <p>Audi A1 selected</p>
</div>
<div class="filterForm" id="a3">
  <p>Audi A3 selected</p>
</div>
<div class="filterForm" id="a4">
  <p>Audi A4 selected</p>
</div>
<div class="filterForm" id="a6">
  <p>Audi A6 selected</p>
</div>
<div class="filterForm" id="a7">
  <p>Audi A7 selected</p>
</div>
<div class="filterForm" id="118">
  <p>BMW 118 selected</p>
</div>
<div class="filterForm" id="320">
  <p>BMW 320 selected</p>
</div>
<div class="filterForm" id="540">
  <p>BMW 540 selected</p>
</div>
<div class="filterForm" id="750">
  <p>BMW 750 selected</p>
</div>
<div class="filterForm" id="x6">
  <p>BMW X6 selected</p>
</div>
<div class="filterForm" id="aclass">
  <p>MB A class selected</p>
</div>
<div class="filterForm" id="bclass">
  <p>MB B class selected</p>
</div>
<div class="filterForm" id="eclass">
  <p>MB E class selected</p>
</div>
<div class="filterForm" id="mlclass">
  <p>MB ML class selected</p>
</div>
<div class="filterForm" id="slclass">
  <p>MB SL class selected</p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

它实际上将与奥迪车型配合使用，这是因为它是第一个选择元素。当通过'id'选择元素时，只有第一个将被选择具有相同的id，因为它们是唯一的。为此我建议在所有选择上放置一个class =“model”，并使用'.model'而不是'#model'来定位它们

答案 2 :(得分：0)

请勿将ID用作select的标识符，将id='model'替换为class='model'，您的代码将按预期工作。

(function() {
  'use strict';
  $('#maker').change(function() {
    $('.filterModel').hide();
    $('#' + $(this).val()).show();
  });
  $('.model').change(function() {
    $('.filterForm').each(function(){$(this).hide()});
    $('#' + $(this).val()).eq(0).show();
  });
}());
.filterModel {
  display: none;
}
.filterForm {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="maker" size="6">
  <option value="">Choose model</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="mb">MB</option>
</select>

<div id="audi" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="a1">A1</option>
    <option value="a3">A3</option>
    <option value="a4">A4</option>
    <option value="a6">A6</option>
    <option value="a7">A7</option>
  </select>
</div>

<div id="bmw" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="118">118</option>
    <option value="320">320</option>
    <option value="540">540</option>
    <option value="750">750</option>
    <option value="x6">X6</option>
  </select>
</div>

<div id="mb" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="aclass">A class</option>
    <option value="bclass">B class</option>
    <option value="eclass">E class</option>
    <option value="mlclass">ML class</option>
    <option value="slclass">SL class</option>
  </select>
</div>

<div class="filterForm" id="a1">
  <p>Audi A1 selected</p>
</div>
<div class="filterForm" id="a3">
  <p>Audi A3 selected</p>
</div>
<div class="filterForm" id="a4">
  <p>Audi A4 selected</p>
</div>
<div class="filterForm" id="a6">
  <p>Audi A6 selected</p>
</div>
<div class="filterForm" id="a7">
  <p>Audi A7 selected</p>
</div>
<div class="filterForm" id="118">
  <p>BMW 118 selected</p>
</div>
<div class="filterForm" id="320">
  <p>BMW 320 selected</p>
</div>
<div class="filterForm" id="540">
  <p>BMW 540 selected</p>
</div>
<div class="filterForm" id="750">
  <p>BMW 750 selected</p>
</div>
<div class="filterForm" id="x6">
  <p>BMW X6 selected</p>
</div>
<div class="filterForm" id="aclass">
  <p>MB A class selected</p>
</div>
<div class="filterForm" id="bclass">
  <p>MB B class selected</p>
</div>
<div class="filterForm" id="eclass">
  <p>MB E class selected</p>
</div>
<div class="filterForm" id="mlclass">
  <p>MB ML class selected</p>
</div>
<div class="filterForm" id="slclass">
  <p>MB SL class selected</p>
</div>

另请考虑阅读SO问题：Can multiple different HTML elements have the same ID if they're different elements?，以调查“为元素使用多个ID”主题

相关问题
最新问题