选择另一个选项时，jQuery 更改选项的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19245794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery change text of an option when another option is selected
提问by Sam Skirrow
I'm trying to change the text of a group of select options when a particular option is selected from a previous dropdown.
当从上一个下拉列表中选择特定选项时，我试图更改一组选择选项的文本。
Here is my html:
这是我的 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>
When someone selects "Wedding" from the first drop down, I want to change the text of all the #band_type_choices dropdown
当有人从第一个下拉列表中选择“婚礼”时，我想更改所有 #band_type_choices 下拉列表的文本
Here is the jQuery i'm using so far, but it does nothing:
这是我目前使用的 jQuery，但它什么也没做：
$('#eventType').change(function() {
var eventTypeName = $("#eventType option:selected");
if (eventTypeName.is(".wedding") ) {
$('#band_type_choices option:contains("acoustic")').text('Wedding Ceremony');
}
});
回答by Arun P Johny
Your selectors are messed up
你的选择器搞砸了
$('#eventType').change(function() {
var eventTypeName = $("#eventType option:selected");
if (eventTypeName.is('[name="wedding"]') ) {
$('#band_type_choices option[name="acoustic"]').text('Wedding Ceremony');
}
});
The wedding option does not have a class wedding, it has name attribute set as wedding, also the :containsis case sensitive so it will be better to use a name selector for setting the value
婚礼选项没有类wedding，它的名称属性设置为wedding，并且:contains区分大小写，因此最好使用名称选择器来设置值
Demo: Fiddle
演示：小提琴
回答by Rory McCrossan
Firstly, you can get the selected value of a selectusing val()(or valuenatively). Secondly, none of the options have the class weddingso is('.wedding')will always fail. Finally, :containsis case-sensitive, so you'd need Acoustic. Try this:
首先，您可以获得select使用val()（或value本机）的选定值。其次，没有一个选项有类，wedding所以is('.wedding')总是会失败。最后，:contains区分大小写，所以你需要Acoustic. 尝试这个：
$('#eventType').change(function() {
if (this.value == "wedding") {
$('#band_type_choices option:contains("Acoustic")').text('Wedding Ceremony');
}
});
