我想根据用户从两个下拉列表中的选择显示一个 div。
虽然我要向用户显示 3 个下拉选项，但我只会根据前两个选项生成输出:
这意味着我将根据用户的选择总共有 9 种可能的输出:
- 海滩 --> 寒冷
- 海滩 --> 快节奏
- 海滩 --> 两者
- 博物馆 --> 放松
- 博物馆 --> 快节奏
- 博物馆 --> 两者
- 山 --> 寒冷
- Alpine --> 快节奏
- 山脉 --> 两者
仅供类似引用，几个月前，我used以下脚本根据 2 个下拉选择生成特定输出: http://jsfiddle.net/barmar/ys3GS/2/
<body>
<h2>Find your Animal Name</h2>
<p>Select your birth month and your favorite color and find your animal name.</p>
<form>
<select id="month">
<option value="">- birth month -</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<label class="January" for="January">January Name</label>
<label class="February" for="February">February Name</label>
<label class="March" for="March">March Name</label>
<label class="April" for="April">April Name</label>
<label class="May" for="May">May Name</label>
<label class="June" for="June">June Name</label>
<label class="July" for="July">July Name</label>
<label class="August" for="August">August Name</label>
<label class="September" for="September">September Name</label>
<label class="October" for="October">October Name</label>
<label class="November" for="November">November Name</label>
<label class="December" for="December">December Name</label>
<select id="color">
<option value="">- favorite color -</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
</select>
<label class="Green" for="Green">Green Name</label>
<label class="Blue" for="Blue">Blue Name</label>
<label class="Red" for="Red">Red Name</label>
</form>
<p id="output"></p>
</body>
但是这个需求有点不同。关于如何实现这一目标的任何想法？换句话说——一旦用户选择了这两个选项，我希望相应的 div(在 9 个选项中)显示在下面。
非常感谢!
最佳答案
您可以创建 9 个 div 元素，每个 div 元素将有两个 data 属性。一种用于旅行偏好，一种用于风格。像这样:
<div class="result" data-preference="beaches" data-style="chill"></div>
<div class="result" data-preference="beaches" data-style="fast-paced"></div>
<div class="result" data-preference="beaches" data-style="both"></div>
<div class="result" data-preference="museums" data-style="chill"></div>
<div class="result" data-preference="museums" data-style="fast-paced"></div>
<div class="result" data-preference="museums" data-style="both"></div>
<div class="result" data-preference="mountains" data-style="chill"></div>
<div class="result" data-preference="mountains" data-style="fast-paced"></div>
<div class="result" data-preference="mountains" data-style="both"></div>
<style>
.result {display:none;}
.result.active {display:block;}
</style>
此外，让我们继续添加一些 CSS 来隐藏这些 div 元素，然后设置一个 active 类，以便我们可以显示 div一旦用户做出选择。
用户选择的选择元素将有选项，每个值必须与 data-preference 和 data-style 值相同。当用户在两个下拉列表中做出选择时，我们将获取所有 div 并过滤掉具有匹配的 data 属性的那个。
$('#preference, #style').on('change', function(){
// set reference to select elements
var preference = $('#preference');
var style = $('#style');
// check if user has made a selection on both dropdowns
if ( preference.prop('selectedIndex') > 0 && style.prop('selectedIndex') > 0 ) {
// remove active class from current active div element
$('.result.active').removeClass('active');
// get all result divs, and filter for matching data attributes
$('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');
}
});
jsfiddle:http://jsfiddle.net/EFM9b/1/
关于javascript - 如何根据 3 个下拉选项显示特定内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19503389/