版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LJFPHP/article/details/89154731
一、背景
博主这边的背景是,在一个JS的循环中,要通过匹配option
的值来给select
下拉框加上默认选中效果。这种涉及到属性匹配的,最适合的就是jquery
的contains
选择器了。当然,大家也可以用这个选择器来匹配html元素的其他属性,都是可以的。
关于contains
:参考文档:
http://www.w3school.com.cn/jquery/selector_contains.asp
二、不精准匹配
var option = $(formId).find("option:contains('" + sourceText + "')").prop("selected", true);
这里的sourceText
是我自己定义的变量值。这句的意思是,对于select
下拉框,如果option
的值和sourceText
的值一样的话,就给它加一个selected
效果。
问题:这个选择器确实是能匹配到对应的元素,但是它是不精准的匹配。
比如:
sourceText = 'test';
sourceText = 'test1';
这种情况的话,test和test1都能匹配到。
三、精准匹配
网上百度一下,有很多精准匹配的方案,大致都试一下
(1) 有一种说法是加上innerHTML,亲测无效
// var option = $(formId).find("option:contains('" + sourceText + "')[innerHTML='" + sourceText + "']").prop("selected", true);
//网上方案,发现没用
(2) 有一种说法是加上个冒号:
var option = $(formId).find("option:contains(':" + sourceText + "')").prop("selected", true);
//网上的方案,加个:,发现没用
(3)正确方法:
var option = $(formId).find("option:contains('" + sourceText + "')").map(function(){
if ($(this).text() == sourceText) { $(this).prop("selected", true) }
});
这个方法是可以的,就是通过map
在一个函数中比对属性和变量的值。如果相等则赋予选中效果。这种通过 ==
来比较的方案还是比较靠谱的。博主最终也是选用了这个方案,记录一下。
end