Как показать разные сообщения (не всплывающие), если выбраны разные опции. Javascript

0

Я хочу показать разные сообщения на самой странице, если выбраны разные комбинации. Вот что у меня уже есть:

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>

Например, я хочу получить сообщение в красном шрифте ниже всего, что говорит "Хороший выбор", если я нажму кнопку "тест", а в первом поле "1" выбрано и во втором "0". И если вы выберете "0" в первом поле и "1!" Во втором, то скажем, например, "Плохой выбор".

  • 0
    В вашей скрипке нет кода. Просто разметка ....
  • 0
    Ваша скрипка не является ссылкой. Если вам нужна помощь, тогда создайте ссылку - я не хочу вырезать и вставлять, чтобы помочь вам.
Показать ещё 1 комментарий
Теги:
button
messages
options

2 ответа

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

Дайте ему вращение:

демонстрация

Поделиться
0

Я разветкил вашу ссылку 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 результатами и сообщениями, которые вы хотите.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню