Question

我有一些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更新＆＃34; name-second＆＃34; SELECT菜单基于选项标签之间的文本值，而不是选项本身的值。

e.g。对于此示例，选项值不同，但选项标记之间的文本是相同的。因此，如果用户选择例如美国名字第一＆＃34;选择，＆＃34;名称 - 秒＆＃34;将更新以显示＆＃34; US＆＃34;选项选项。

<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

使用此代码按索引更改第二个选择框：

$("#name-first").change(function() {
    $("#name-second").prop('selectedIndex', $(this).prop('selectedIndex'));
});

使用此代码按值更改第二个选择框：

$("#name-first").change(function() {
    $("#name-second").val($(this).val());
});

使用此代码按文字更改第二个选择框：

    $(function() {
     $("#name-first").change(function() {
        var $that = $(this);
        var a = $that.find('option:selected').text();
        $('#name-second option').each(function(){
            var $this = $(this);
            if($this.text() === a){
                $('#name-second').prop('selectedIndex', $this.index());
                return false;
            }
        });
    });
});

看到这个更新的小提琴： http://jsfiddle.net/x2pL3/2/

Answer 2

试试这个：

$("#name-first").change(function(){
  if($(this).val() == "15"){
    $("#name-second").val("10");
  }
});

Answer 3

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

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

http://jsfiddle.net/DVszJ/

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

3 个答案: