Jquery 基于选择值显示div

我正在尝试创建一个表单，在用户做出选择后进行更改。 如果用户选择选项A，则使用类选项1显示div的内容

我已经用下面或下面非常简单的jquerysee代码完成了这项工作。 我不明白的是如何让它充满活力

以下是我在脑海中的想法：

从select中获取所有选项值并放入数组。 用新数组替换hideAll函数的内容。 为通过数组和 使if stament变得简单。 注意：选项值始终与div类相同

var hideAll=函数{ $'.option1、.option2、.option3'.hide； } $'select'。在'change'上，函数{ 希德尔； var category=$this.val； console.logcategory； 如果类别=='option1'{ $'.option1'.show； } 如果类别=='option2'{ $'.option2'.show； } 如果类别=='选项3'{ $'.option3'.show； } }; 选择权 选择1 选择2 选择3 国家 丹麦 挪威 英国 信件 A. B C 数字 1. 2. 3.

---

给你的选项divs另一个类

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

使用“选择”值显示块

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

---

给你的选项divs另一个类

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

使用“选择”值显示块

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

---

根本不需要循环，只需搜索其类以option开头的任何div：

var hideAll=函数{ $'div[class^=option]'。隐藏； } $'select'。在'change'上，函数{ 希德尔； var category=$this.val； $'..+category.show； }; 选择权 选择1 选择2 选择3 国家 丹麦 挪威 英国 信件 A. B C 数字 1. 2. 3.

---

根本不需要循环，只需搜索其类以option开头的任何div：

var hideAll=函数{ $'div[class^=option]'。隐藏； } $'select'。在'change'上，函数{ 希德尔； var category=$this.val； $'..+category.show； }; 选择权 选择1 选择2 选择3 国家 丹麦 挪威 英国 信件 A. B C 数字 1. 2. 3.

---

我认为有一个更简单的方法来解决这个问题。首先，对HTML使用ID和类的组合，然后使用JQuery为您处理动态内容

HTML

请注意，我已将class=option grouping id=option1等添加到每个div中。这是更好的语义结构，使JQuery更容易

<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="option-grouping" id="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="option-grouping" id="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="option-grouping" id="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>

---

真是一种享受

我认为有一个更简单的方法来解决这个问题。首先，对HTML使用ID和类的组合，然后使用JQuery为您处理动态内容

HTML

请注意，我已将class=option grouping id=option1等添加到每个div中。这是更好的语义结构，使JQuery更容易

<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="option-grouping" id="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="option-grouping" id="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="option-grouping" id="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>

---

真是一种享受

如果您能够调整HTML，那么这绝对是一种更好的方法。总是对单个类进行操作。如果您需要按原样使用现有的HTML，请参阅我的答案，但如果可能的话，请这样做。如果您能够调整HTML，这绝对是一种更好的方法。总是对单个类进行操作。如果您需要按原样使用现有HTML，请参阅我的答案-如果可能的话，请这样做。我应该澄清，使用id=option1比使用class=option1更好的原因是，id用于页面上唯一的元素，然而，类是用于希望在页面上看到重复的元素。我应该澄清，使用id=option1而不是class=option1更好的原因是，id用于页面上唯一的元素，而类用于希望在页面上看到重复的元素。