Отображение определенного текстового вывода на основе двух выпадающих значений

Я хочу отображать две текстовые строки в зависимости от выбора пользователя из двух выпадающих списков.Отображение определенного текстового вывода на основе двух выпадающих значений

Таким образом, есть два выпадающих вариантов: enter image description here

Для каждого варианта месяца, я хочу иметь соответствующее значение. Таким образом, для январского варианта значение будет «Январьское имя». Для каждого параметра цвета также есть соответствующее значение. Таким образом, для зеленого варианта это значение «Зеленое имя».

Как только пользователь выбирает обе опции (месяц И цвет), я хочу, чтобы на выходе отображался текст с конкатенацией двух значений.

Так, например, если я выбираю январь и зеленый, то выход будет:

enter image description here

Если изменить месяц на что-то другое, имя обновит соответственно.

Я собрал некоторый код html/css как начало http://jsfiddle.net/baumdexterous/ys3GS/. Я был бы очень признателен, если бы кто-нибудь мог пролить свет на то, как я мог бы достичь этой задачи, используя jquery! Также - как я могу сделать вывод текста в ?. Огромное спасибо!!!

<body> 

    <h2>Find your Animal Name</h2> 

<p>Select your birth month and your favorite color and find your animal name.</p> 

<form> 
     <select id="month"> 
      <option value="">- birth month -</option> 
      <option value="January">January</option> 
      <option value="February">February</option> 
      <option value="March">March</option> 
      <option value="April">April</option> 
      <option value="May">May</option> 
      <option value="June">June</option> 
      <option value="July">July</option> 
      <option value="August">August</option> 
      <option value="September">September</option> 
      <option value="October">October</option> 
      <option value="November">November</option> 
      <option value="December">December</option> 
     </select> 
     <label class="January" for="January">January Name</label> 
     <label class="February" for="February">February Name</label> 
     <label class="March" for="March">March Name</label> 
     <label class="April" for="April">April Name</label>   
     <label class="May" for="May">May Name</label> 
     <label class="June" for="June">June Name</label>   
     <label class="July" for="July">July Name</label> 
     <label class="August" for="August">August Name</label> 
     <label class="September" for="September">September Name</label> 
     <label class="October" for="October">October Name</label> 
     <label class="November" for="November">November Name</label> 
     <label class="December" for="December">December Name</label> 


     <select id="color"> 
      <option value="">- favorite color -</option> 
      <option value="Green">Green</option> 
      <option value="Blue">Blue</option> 
      <option value="Red">Red</option> 
     </select> 
     <label class="Green" for="Green">Green Name</label> 
     <label class="Blue" for="Blue">Blue Name</label> 
     <label class="Red" for="Red">Red Name</label> 
    </form> 

    <!-- <p class="output">YOUR ANIMAL NAME IS JANUARY NAME GREEN NAME</p> --> 

</body>

BTW - Я также хочу, чтобы стилизовать выбрать поля ... так он делает больше смысла писать их как элементы списка (Li, уль)?

источник

2013-03-26 Ori

что ваш вопрос? – Ryan

Если вы хотите стилить поля формы, попробуйте http://Uniformjs.com/ – Barmar

$("#month, #color").change(function() { 
    var month = $("#month").val(); 
    var color = $("#color").val(); 
    var content = ''; 
    if (month && color) { 
     var monthlabel = $("label[for="+month+"]").text(); 
     var colorlabel = $("label[for="+color+"]").text(); 
     content = 'Your animal name is ' + monthlabel + ' ' + colorlabel; 
    } 
    $("#output").text(content).fadeIn(); 
});

FIDDLE

источник

2013-03-26 18:47:32 Barmar

Эй, извините, код, который я хотел опубликовать, это следующее: jsfiddle.net/baumdexterous/ys3GS – Ori

Я обновил вашу скрипку, взгляните , – Barmar

Большое вам спасибо! Это именно то, что я пытался решить. СПАСИБО СМОТРЕТЬ БОЛЬШЕ @Barmar! Очень ценю вашу помощь. – Ori

Отображение определенного текстового вывода на основе двух выпадающих значений

ответ

Смежные вопросы