2013-04-03 3 views
0

Я следующий сценарий написан:Как отобразить метку выбора?

http://jsfiddle.net/rgf8K/

Как это работает, что вы выбираете вы месяц рождения и любимый цвет, а затем он должен предоставить вам с вашим «Имя знаменитости.»

Прямо сейчас, как написано скрипт, неправильно ... потому что на выходе не отображается метка опции для выбранного значения параметра. Если человек выбирает январь за месяц и зеленый для цвета, я хочу, чтобы на выходе говорилось: Ваше имя знаменитости - Линда Грин.

Как я могу отобразить метку выбранной опции ярлыка? Спасибо!!

HTML

<form> 
    <select id="month"> 
     <option value="">- birth month -</option> 
     <option value="January">January</option> 
     <option value="February">February</option> 
     <option value="March">March</option> 
    </select> 
    <label class="January" for="January">Linda</label> 
    <label class="February" for="February">Chris</label> 
    <label class="March" for="March">James</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">Roberts</label> 
    <label class="Blue" for="Blue">Blue</label> 
    <label class="Red" for="Red">Unger</label> 
</form> 

    <p id="output"></p> 

JQuery

$("#month, #color").change(function() { 
    var month = $("#month").val(); 
    var color = $("#color").val(); 
    var content = ''; 
    if (month && color) { 
     content = 'Your celebrity name is ' + month + ' name ' + color + ' name'; 
    } 
    $("#output").text(content).fadeIn(); 
}); 
+2

Я не думаю, что я когда-либо видел ярлыки, используемые ранее. – isherwood

+0

Это должно быть вопрос выбора правильной метки в DOM на основе выбранного цвета. Вы пробовали что-нибудь подобное? –

+0

используйте массив вместо странной системы ярлыков у вас есть – charlietfl

ответ

0

Вы можете изменить значение атрибутов ваших вариантов:

<select id="month"> 
     <option value="">- birth month -</option> 
     <option value="Linda">January</option> 
     <option value="Chris">February</option> 
     <option value="James">March</option> 
    </select> 

Аналогично для цветов.

<select id="color"> 
     <option value="">- favorite color -</option> 
     <option value="Roberts">Green</option> 
     <option value="Blue">Blue</option> 
     <option value="Unger">Red</option> 
    </select> 

Затем удалите этикетки и работайте должным образом.

0

, поскольку у вас есть имя класса для значения месяца выбрать вы можете попробовать это:

изменение:

var month = $("#month").val(); 
var color =$("#color").val(); 

к:

var month = $('.'+$("#month").val()).text(); 
var color = $('.'+$("#color").val()).text(); 
Смежные вопросы