如果選擇了不同的選項，如何顯示不同的消息（不彈出）。使用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