根据选择值显示div

Question

我试图在用户做出选择后进行更改。 如果用户选择“选项A”，然后用类“option1”显示div的内容。

我已经用非常简单的jquery完成了这个操作（见下面的代码或jsfiddle）。 我无法弄清楚的是如何让它变成动态的。

这里是我会怎么做它在我的脑海：

1. 从“＃选择”获取所有选项值并投入阵列。
2. 用新阵列替换“hideAll”函数的内容。
3. 使某种“为每个功能”运行，虽然阵列和 使如果stament。

小记：选项值始终与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

没有必要为一个循环的一切，你可以搜索任何格，其班级开始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>

Answer 2

给你选择的div另一个类

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

使用选择值显示块

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

http://jsfiddle.net/yd5qsquL/

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

jQuery的

这是凉爽的一部分。完成这一切，试试这个作为你的jQuery：

$('#select').on('change', function() { 
    var category = $(this).val(); 
    /* Hide all the divs */ 
    $('.option-grouping').hide(); 
    /* Now unhide the selected options */ 
    $('#' + category).show(); 
}); 

工程一个款待！