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

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');
    }
};

点击演示

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

正确回答这个问题不会使用含有由于可以用文本，如出现的冲突：

• 文本
• TEXT1

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();

这是一个正在工作的小提琴。