jquery - 根据选择值显示 div

Question

我正在尝试制作一个在用户做出选择后会发生变化的表单。如果用户选择“选项 A”，则显示类为“选项 1”的 div 的内容。

我已经用非常简单的 jquery 完成了这个(参见下面的代码或 jsfiddle)。我想不通的是如何让它变得动态。

这是我在脑海中的做法:

1. 从“#select”获取所有选项值并放入数组。
2. 用新数组替换“hideAll”函数的内容。
3. 制作某种“for-each-function”在数组中运行并且制作 if 语句。

一点注意:选项值始终与 div 类相同。

var hideAll = function() {
  $('.option1, .option2, .option3').hide();
}

$('#select').on('change', function() {
  hideAll();
  var category = $(this).val();
  console.log(category);
  if (category === 'option1') {
    $('.option1').show();
  }
  if (category === 'option2') {
    $('.option2').show();
  }
  if (category === 'option3') {
    $('.option3').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
  <label for="option">Options</label>
  <select name="select" id="select">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <div class="option1" style="display:block;">
    <label for="countries">Countries</label>
    <select name="countries">
      <option value="denmark">Denmark</option>
      <option value="norway">Norway</option>
      <option value="uk">UK</option>
    </select>
  </div>

  <div class="option2" style="display:none;">
    <label for="letters">Letters</label>
    <select name="letters">
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
    </select>
  </div>

  <div class="option3" style="display:none;">
    <label for="numbers">Numbers</label>
    <select name="numbers">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</form>

Answer 1

将你的选项分配给另一个类

<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
  <option value="denmark">Denmark</option>
  <option value="norway">Norway</option>
  <option value="uk">UK</option>
</select>
 </div>

<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>
</div>

<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</div>

在hideall中使用你的新类

var hideAll = function() {
    $('.optiondiv').hide();
}

使用选择值显示一个 block

$('#select').on('change', function() {
    hideAll();
    var category = $(this).val();
    $('.' + category).show();
});

http://jsfiddle.net/yd5qsquL/