javascript - 如何通过匹配包含的文本来填充下拉选择框？

Question

我创建了两个相同的下拉选择框，如下所示:

HTML

<select id="ddl1" name="ddl1">
    <option value="1">TEXT 1</option>
    <option value="2">TEXT 2</option>
    <option value="3">TEXT 3</option>
</select>

<select id="ddl2" name="ddl2">
    <option value="1">TEXT 1</option>
    <option value="2">TEXT 2</option>
    <option value="3">TEXT 3</option>
</select>

我使用 jquery 创建了代码，当另一个更改时更新一个的值，反之亦然，如下所示:

JQUERY

var a = ('#ddl1'),
    b = ('#ddl2');

$(a + ',' + b).change(selectddl);
$(selectddl);

function selectddl() {
    var val = $(this).val();
    var text = $(this).text();

    if (this.id === 'ddl1') {
        $(b + ' option[value="' + val + '"]').prop('selected', true);
        $(b).selectmenu('refresh');
    } else if (this.id === 'ddl2') {
        $(a + ' option[value="' + val + '"]').prop('selected', true);
        $(a).selectmenu('refresh');
    }
};

我现在的要求是根据包含的 TEXT 而不是它们的值来更新选择框。

---

问题

如何根据另一个包含TEXT的选择框来更新下拉选择框？

经过一些研究，我试过但没有成功，如下所示:

JQUERY

var a = ('#ddl1'),
    b = ('#ddl2');

$(a + ',' + b).change(selectddl);
$(selectddl);

function selectddl() {
    var val = $(this).val();
    var text = $(this).text();

    if (this.id === 'ddl1') {
        $(b + ' option[value="' + val + '"]').prop('selected', true);
        $(b).selectmenu('refresh');
    } else if (this.id === 'ddl2') {
        $(a + ' option:contains("' + text + '")').prop('selected', true);
        $(a).selectmenu('refresh');
    }
};

CLICK FOR DEMO

谁能解释一下这是如何实现的？

这个问题的正确答案将不使用包含，因为这样的文本可能会产生冲突:

• 文本
• 文本 1

Answer 1

您可以使用.filter() 函数来实现您的请求。您基本上需要选择所有选项，然后调用 .filter()，传入一个只接受文本等于您期望的选项的函数。

例如，您的 else if 语句可能如下所示:

else if (this.id === 'ddl2') {
    $(a + ' option').filter(function() {
        return this.text === text;
    }).prop('selected', true);
    $(a).selectmenu('refresh');
}

此外，看起来您还需要更改 text 变量。您应该将其更改为将选择当前选择选项的文本的内容，如下所示:

var text = $(this).find(':selected').text();

Here's a working Fiddle.