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

给它一个旋转：

<强> Demo

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 个答案: