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

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

任何人都可以解释如何实现这一目标吗？

此问题的正确答案是不使用包含，因为文字可能会产生冲突，例如：

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

Here's a working Fiddle.