如果选择了不同的选项，如何显示不同的消息（不弹出）。 使用Javascript
[英]How to show different messages (not popup) if different options selected. Javascript
问题描述
I want to show different messages on the page itself if different combinations are selected. 
如果选择了不同的组合，我想在页面上显示不同的消息。 Here is what I already have: 这是我已经拥有的：
http://jsfiddle.net/uDJd8/ http://jsfiddle.net/uDJd8/
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>testpage</title>
</head>
<body>
<input value="test" onclick="return send();"
type="submit"><br>
<form name="form1"></form>
<span ="">
<select name="A" id="A">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</span><span ="">
<select name="B" id="B">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</span>
</body>
</html>
For example I want to get a message in red font below all that says "Good Choice" if I press the "test" button and in the first box "1" is selected and in the second "0". 例如，如果我按下“测试”按钮，并且在第一个框中选择了“ 1”，在第二个框中选择了“ 0”，那么我想获得一条红色字体的消息，上面写着“ Good Choice”。 And if you select "0" in the first box and "1! in the second it should say for example "Bad Choice". 如果在第一个框中选择“ 0”，在第二个框中选择“ 1！”，则应显示“ Bad Choice”。
2 个解决方案
解决方案1
1 已采纳 2014-03-03 21:59:27
If you don't want popups, you have to dedicate an element on the page to display the messages via its innerHTML property. 如果不想弹出窗口，则必须在页面上指定一个元素以通过其innerHTML属性显示消息。 Note the SPAN at the bottom: 请注意底部的SPAN：
HTML HTML
<input value="test" onclick="return send();" type="button"><br>
<select name="A" id="A">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="B" id="B">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<span id="result" style="color:red" ></span>
With this setup all you have to do is to implement function send() . 使用此设置，您要做的就是实现功能send() 。 It has to check values of your dropdown boxes and assign respective message to the SPAN: 它必须检查下拉框的值，并将相应的消息分配给SPAN：
JavaScript JavaScript的
function send() {
var i1 = document.getElementById('A').value;
var i2 = document.getElementById('B').value;
var spn = document.getElementById('result');
if (i1 == "1" && i2 == "0")
spn.innerHTML = 'Good Choice!'
else if (i1 == "0" && i2 == "1")
spn.innerHTML = 'Bad Choice!'
else
spn.innerHTML = 'Whatever!'
}
Give it a spin: 试一下：
解决方案2
0 2014-03-03 22:00:06
I have forked your jsfiddle link to the following: http://jsfiddle.net/6aBsy/1/ 我已将您的jsfiddle链接分叉到以下链接： http : //jsfiddle.net/6aBsy/1/
Just one thing to note, your markup that you supplied is invalid, so if you are posting to the server it wont work. 请注意，您提供的标记无效，因此，如果要发布到服务器，它将无法正常工作。
So based on the following markup: 因此，基于以下标记：
<button class="submit-action">test</button><br>
<span ="">
<select name="A" id="A">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</span><span ="">
<select name="B" id="B">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</span>
<br/>
<label class="message"></label>
And the following Javascript (You need jquery) 和以下Javascript（您需要jquery）
var messages = [{
option1: 0,
option2: 1,
message: 'Awesome'
},{
option1: 1,
option2: 0,
message: 'Lame'
}]; // etc.
$('.submit-action').click(function(){
var optionA = $('#A').val();
var optionB = $('#B').val();
$('.message').text('');
$(messages).filter(function(index){
if (messages[index].option1==optionA && messages[index].option2==optionB) {
$('.message').text(messages[index].message);
}
});
});
Basically just fill the json with the results and messages you want. 基本上，只需将所需的结果和消息填充到json中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.