选择另一个选项时，jQuery更改选项的文本答案

【问题标题】：jQuery change text of an option when another option is selected选择另一个选项时，jQuery更改选项的文本
【发布时间】：2013-10-15 06:19:17
【问题描述】：

当从上一个下拉列表中选择特定选项时，我正在尝试更改一组选择选项的文本。

这是我的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');
}

});

【问题讨论】：

标签： jquery select text option

【解决方案1】：

首先，您可以使用val()（或本机value）获取select 的选定值。其次，没有一个选项有 wedding 类，所以 is('.wedding') 总是会失败。最后，:contains 区分大小写，因此您需要Acoustic。试试这个：

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

Example fiddle

【讨论】：

【解决方案2】：

你的选择器搞砸了

$('#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 区分大小写，因此最好使用名称选择器来设置值

演示：Fiddle

【讨论】：