javascript - 根据第一个 SELECT 元素中的值更新第二个 SELECT 元素

Question

这个问题已经有答案了:

Populate 2nd dropdown based on results of 1st (1 个回答)

已关闭 9 年前。

我有一些 HTML/Javascript，它将根据选择菜单 A 的选择值更改选择菜单 B 的值。

Javascript:

<script>
$(function() {
    $("#name-first").change(function() {
        $("#name-second")[0].selectedIndex = $(this)[0].selectedIndex;
    });
});
</script>

HTML:

<p>First Name: 
    <select id="name-first">
        <option value="1">UK</option>
        <option value="2">US</option>
        <option value="3">France</option>
    </select>
</p>

<p>Surname: 
    <select id="name-second">
        <option value="1">UK</option>
        <option value="2">US</option>
        <option value="3">France</option>
    </select>
</p>

这是可行的，但我意识到我需要更改它，以便 jQuery 根据选项标记之间的文本值而不是选项本身的值来更新“name-second”SELECT 菜单.

例如对于此示例，选项值不同，但选项标记之间的文本相同。因此，如果用户选择了例如在选择“name-first”时，“name-first”将更新为显示“US”选项。

<p>First Name: 
    <select id="name-first">
        <option value="234">UK</option>
        <option value="15">US</option>
        <option value="12">France</option>
    </select>
</p>

<p>Surname: 
    <select id="name-second">
        <option value="562">UK</option>
        <option value="10">US</option>
        <option value="6">France</option>
    </select>
</p>

我想知道 jQuery 函数是否需要进行重大更改才能适应稍微不同的要求，是否有人可以帮助我进行修改？

非常感谢任何建议。

谢谢

Answer 1

您可以使用 jQuery 选择器 :contains() 来匹配选项中的文本:

$("#name-second option:contains('" + $("#name-first option:selected").text() + "')").prop('selected', true);

http://jsfiddle.net/DVszJ/