显示基于2个下拉选择的特定文本输出 [英] Showing specific text output based on 2 drop down selections
问题描述
我想根据两个下拉列表中的用户选择显示两个文本字符串。
所以有两个下拉选项：
对于每个月的选项，我想要一个相应的值。因此，对于1月份的选项，该值为1月份名称。对于每个颜色选项，还有一个相应的值。所以对于绿色选项，值为绿色名称。
一旦用户选择了这两个选项（月和颜色），我希望输出显示一个带有两个值的并置的文本。所以例如，如果我选择1月和1号，输出将是：
如果我将月份更改为其他内容，该名称将相应更新。
我把一些html / css代码作为一个开始 http://jsfiddle.net/baumdexterous/ys3GS/ 。如果有人能用jquery来解释我如何实现这个任务，我将非常感谢！另外 - 如何使文本输出淡入？非常感谢你!!!
< body>
< h2>查找您的动物名称< / h2>
< p>选择您的出生月份和您最喜欢的颜色，并找到您的动物名称。< / p>
< form>
< select id =month>
< option value => - 出生月份 - < / 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 =Januaryfor =January> January Name< / label>
< label class =Februaryfor =February> February Name< / label>
< label class =Marchfor =March> March Name< / label>
< label class =Aprilfor =April> April Name< / label>
< label class =Mayfor =May> May Name< / label>
< label class =Junefor =June> June Name< / label>
< label class =Julyfor =July> July Name< / label>
< label class =Augustfor =August> August Name< / label>
< label class =Septemberfor =September> September Name< / label>
< label class =10月for =10月>十月名称< / label>
< label class =Novemberfor =November> 11月名称< / label>
< label class =十二月for =十二月>十二月名称< / label>
< select id =color>
< option value => - 最喜欢的颜色 - < / option>
< option value =Green> Green< / option>
< option value =Blue> Blue< / option>
< option value =Red> Red< / option>
< / select>
< label class =Greenfor =绿色>绿色名称< / label>
< label class =Bluefor =Blue> Blue Name< / label>
< label class =Redfor =Red> Red Name< / label>
< / form>
<！ - < p class =output>您的动物名称是JANUARY NAME GREEN NAME< / p> - >
< / body>
BTW - 我也想要选择字段的样式...所以写更有意义这些作为列表项（li，ul）？
$（＃month ，#color）。change（function（）{
var month = $（＃month）。val（）;
var color = $（＃color
var content ='';
if（month&& color）{
var monthlabel = $（label [for =+ month +]
var colorlabel = $（label [for =+ color +]）。text（）;
content ='你的动物名称是'+ monthlabel +''+ colorlabel;
}
$（＃output）。text（content）.fadeIn（）;
}）;
I want to display two text strings depending on a user's selection from two drop down lists.
So there are two drop down options:
For each month option, I want to have a corresponding value. So for January option, the value would be "January Name." For each color option, there is also a corresponding value. So for green option, the value is "Green name."
Once the user selects both options (month AND color), I want the output to display a text with the concatenation of the two values.
So for example, if I select January and Green, the output will be:
If I change the month to something else, the name would update accordingly.
I put together some html/css code as a start http://jsfiddle.net/baumdexterous/ys3GS/. I would greatly appreciate if anyone could shed some light on how I could achieve this task using jquery! Also - how can I make the text output fade in?. Thank you so much!!!
<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 class="output">YOUR ANIMAL NAME IS JANUARY NAME GREEN NAME</p> -->
</body>
BTW - I also want to style the select fields... so does it make more sense to write these as a list items (li, ul)?
$("#month, #color").change(function () {
var month = $("#month").val();
var color = $("#color").val();
var content = '';
if (month && color) {
var monthlabel = $("label[for="+month+"]").text();
var colorlabel = $("label[for="+color+"]").text();
content = 'Your animal name is ' + monthlabel + ' ' + colorlabel;
}
$("#output").text(content).fadeIn();
});
这篇关于显示基于2个下拉选择的特定文本输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
