根据选择值显示div [英] Show div based on select value

问题描述

我想让用户做出选择后更改的表单。
如果用户选择选项A，然后显示div类的内容与类option1。

我已经用非常简单的jquery请参阅下面的代码或 jsfiddle ）。
我不能想出的是如何使它动态。

这是我在我脑海中的做法：

2. 使用新数组替换hideAll函数的内容。

注意事项：选项值始终与div类相同。

  var hideAll = function（）{$（'。option1，.option2， （'change'，function（）{hideAll（）; var category = $（this）.val（）; console.log（category））。 if（category ==='option1'）{$（'。option1'）。show（）;} if（category ==='option2'）{$（'。option2'）。show 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>选项< / label> < select name =selectid =select> < option value =option1>选项1< / option> < option value =option2>选项2< / option> < option value =option3>选项3< / option> < / select> < div class =option1style =display：block;> < label for =countries>国家< / label> < select name =countries> < option value =denmark>丹麦< / option> < option value =norway>挪威< / option> < option value =uk> UK< / option> < / select> < / div> < div class =option2style =display：none;> < label for =letters>字母< / label> < select name =letters> < option value =a> A< / option> < options value =b> B< / option> < option value =c> C< / option> < / select> < / div> < div class =option3style =display：none;> < label for =numbers>数字< / label> < select name =numbers> < option value =1> 1< / option> < option value =2> 2< / option> < option value =3> 3< / option> < / select> < / div>< / form>  

解决方案

根本不需要循环，你可以搜索任何以选项开头的div：

  var hideAll = function（）{$（'div [class ^ = option]'）。hide（）;} $（'＃select'）。on '，function（）{hideAll（）; var category = $（this）.val（）; $（'。'+ category）.show（）;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11。 1 / jquery.min.js>< / script>< / script>< form method =post>< label for =option> select> < option value =option1>选项1< / option> < option value =option2>选项2< / option> < option value =option3>选项3< / option>< / select>< div class =option1style =display：block;>< label for =countries> ; / label>< select name =countries> < option value =denmark>丹麦< / option> < option value =norway>挪威< / option> < option value =uk>英国< / option>< / select> < / div>< div class =option2style =display：none;>< label for =letters> < option value =a> A< / option> < option value =b> B< / option> < option value =c> C< / option>< / select>< / div>< div class =option3style =display：none;>< label for = > Numbers< / label>< select name =numbers> < option value =1> 1< / option> < option value =2> 2< / option> < option value =3> 3< / option>< / select>< / div>  

>

I'm trying to make a form that changes after the users makes a choice. If the user select "Option A" then show content of the div with the class "option1".

I have already done this with very simple jquery(see code below or jsfiddle). What I can't figure out is how to make it dynamic.

Here is how I would do it in my head:

1. Get all option values from "#select" and put into array.
2. Replace the content of "hideAll" function with the new array.
3. Make some kind of "for-each-function" that runs though the array and makes the if stament.

A little note: The option value are always the same as the div class.

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>

解决方案

No need for a loop at all, and you can just search for any div whose class begins with option:

var hideAll = function() {
  $('div[class^=option]').hide();
}

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

  $('.' + category).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>

这篇关于根据选择值显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！