我想显示两个文本字符串,具体取决于用户从两个下拉列表中的选择。
所以有两个下拉选项:
对于每个月选项,我想要一个相应的值。因此,对于1月选项,该值将为“1月名称”。对于每种颜色选项,还有相应的值。因此对于绿色选项,值为“绿色名称”。
一旦用户选择了两个选项(月份和颜色),我希望输出显示带有两个值串联的文本。
例如,如果我选择January和Green,输出将为:
如果我将月份更改为其他内容,则名称会相应更新。
我将一些html / css代码放在一起作为开始http://jsfiddle.net/baumdexterous/ys3GS/。如果有人能够阐明如何使用jquery完成这项任务,我将不胜感激!另外 - 如何使文本输出淡入?非常感谢你!!!
<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>
顺便说一句 - 我也想设置选择字段的样式...所以将它们作为列表项(li,ul)更有意义吗?
答案 0 :(得分:3)
$("#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();
});