2013-10-08 22 views
1

Я пытаюсь изменить текст группы параметров выбора, когда выбранный параметр выбран из предыдущего раскрывающегося списка.jQuery изменить текст опции при выборе другой опции

Вот мой HTML:

<select class="select" id="eventType" name="eventType" size="1"> 
    <option value="0"></option> 
    <option value="wedding" name="wedding">Wedding</option> 
    <option value="private_party" name="private_party">Private Party</option> 
    <option value="corporate" name="corporate">Corporate Event</option> 
</select> 

<select class="select" id="band_type_choices" name="bandType"> 
<option value="0"></option> 
    <option value="acoustic" class="acoustic" name="acoustic">Acoustic</option> 
    <option value="jazz" class="jazz" name="jazz">Jazz/Easy Listening</option> 
    <option value="acoustic_jazz" class="acoustic_jazz" name="acoustic_jazz">Acoustic + Jazz/Easy Listening</option> 
    <option value="party" class="party" name="party">Party</option> 
    <option value="acoustic_party" class="acoustic_party" name="acoustic_party">Acoustic + Party</option> 
    <option value="jazz_party" class="jazz_party" name="jazz_party">Jazz/Easy Listening + Party</option> 
    <option value="acoustic_jazz_party" class="acoustic_jazz_party" name="acoustic_jazz_party">Acoustic + Jazz/Easy Listening + Party</option> 
</select> 

Когда кто-то выбирает «Свадьба» от первой капли вниз, я хочу, чтобы изменить текст всех #band_type_choices выпадающего списка

Вот JQuery я» использую до сих пор, но ничего не делает:

$('#eventType').change(function() { 
    var eventTypeName = $("#eventType option:selected"); 

if (eventTypeName.is(".wedding")) { 
    $('#band_type_choices option:contains("acoustic")').text('Wedding Ceremony'); 
} 

}); 

ответ

5

Ваши селекторы не перепутались

$('#eventType').change(function() { 
    var eventTypeName = $("#eventType option:selected"); 

    if (eventTypeName.is('[name="wedding"]')) { 
     $('#band_type_choices option[name="acoustic"]').text('Wedding Ceremony'); 
    } 

}); 

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

Demo: Fiddle

+0

работал отлично, спасибо очень много –

1

Во-первых, вы можете получить выбранное значение select, используя val() (или value изначально). Во-вторых, ни один из вариантов не имеет класса wedding, поэтому is('.wedding') всегда будет терпеть неудачу. Наконец, :contains чувствителен к регистру, поэтому вам понадобится Acoustic. Попробуйте это:

$('#eventType').change(function() { 
    if (this.value == "wedding") { 
     $('#band_type_choices option:contains("Acoustic")').text('Wedding Ceremony'); 
    } 
}); 

Example fiddle

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