我创建了两个相同的下拉选择框,如下所示:
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
最佳答案
您可以使用.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();
关于javascript - 如何通过匹配包含的文本来填充下拉选择框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24330131/