如果选择了不同的选项，如何显示不同的消息（不弹出）。使用Javascript

Question

如果选择了不同的组合，我想在页面上显示不同的消息。 这是我已经拥有的：

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

例如，如果我按下“测试”按钮，并且在第一个框中选择了“ 1”，在第二个框中选择了“ 0”，那么我想获得一条红色字体的消息，上面写着“ Good Choice”。 如果在第一个框中选择“ 0”，在第二个框中选择“ 1！”，则应显示“ Bad Choice”。

Answer 1

如果不想弹出窗口，则必须在页面上指定一个元素以通过其innerHTML属性显示消息。 请注意底部的SPAN：

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>

使用此设置，您要做的就是实现功能send() 。 它必须检查下拉框的值，并将相应的消息分配给SPAN：

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!'    
}

试一下：

演示

Answer 2

我已将您的jsfiddle链接分叉到以下链接： http : //jsfiddle.net/6aBsy/1/

请注意，您提供的标记无效，因此，如果要发布到服务器，它将无法正常工作。

因此，基于以下标记：

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

和以下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);
        }
    });

});

基本上，只需将所需的结果和消息填充到json中。

如果选择了不同的选项，如何显示不同的消息（不弹出）。使用Javascript

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-03-03 21:59:27

解决方案2
0 2014-03-03 22:00:06

如果选择了不同的选项，如何显示不同的消息（不弹出）。 使用Javascript

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-03-03 21:59:27

解决方案2 0 2014-03-03 22:00:06

如果选择了不同的选项，如何显示不同的消息（不弹出）。使用Javascript

解决方案1
1 已采纳 2014-03-03 21:59:27

解决方案2
0 2014-03-03 22:00:06