如何使用jquery获取select元素具有MULTIPLE模式和反向

I have a stack with my work today. My stack here:

今天我的工作堆栈。我的堆栈在这里:

I have a select html element and it has MULTIPLE mode:

我有一个select html元素,它有MULTIPLE模式:

<select class="test" MULTIPLE></select>

(MULTIPLE mode also type as : multiple="multiple" i inclue here)

(MULTIPLE模式也输入:multiple =“multiple”我包括在这里)

<select class="test" multiple='multiple'></select>

now i only want select this element in many normal select element:

现在我只想在许多普通的select元素中选择这个元素:

<select class="test" ></select>
<select class="test" ></select>
<select class="test" multiple='multiple'></select>
<select class="test"> </select>

i was using jQ like this:

我正在使用这样的jQ:

$(".test[!MULTIPLE]").css('border','solid 1px red');

but all select element has border red;

但所有选择元素都有边框红色;

How can i get only select element MULTIPLE. And get select not MULTIPLE mode?

我怎样才能获得选择元素MULTIPLE。并选择不是MULTIPLE模式?

3 个解决方案

#1

Try this:

$(".test:not([multiple])").css('border','solid 1px red');

Edit: As Reigel mentions, you can get the same result set with better performance if you avoid the jQuery pseudo-selector:

编辑:正如Reigel所提到的,如果避免使用jQuery伪选择器,则可以获得具有更好性能的相同结果集:

$(".test").not([multiple]).css('border','solid 1px red');

Edit 2: As you can tell from the comments, some quick testing shows that, at least for a few of us, the second option is actually slower. Digging further, according to css3.info, native support for the :not CSS3 selector is more widespread than I thought. That probably makes all the difference (sorry IE7), assuming jQuery uses the native selector when available.

编辑2:从评论中可以看出,一些快速测试显示,至少对于我们中的一些人来说,第二个选项实际上更慢。根据css3.info进一步深入研究,本机支持:不是CSS3选择器比我想象的更广泛。这可能会有所不同(对不起IE7),假设jQuery在可用时使用本机选择器。

Edit 3: Further thanks to @nickf, who ran these tests in IE8, and found no substantive difference between the two. In light of all this ambiguity, it would be wise to test in your target browser if jQuery pseudo-selectors, or :not/.not specifically, fall into a code hot spot that has a material impact on performance (and if you have a controlled target browser environment).

编辑3:进一步感谢@nickf,他在IE8中运行了这些测试,并发现两者之间没有实质性区别。鉴于所有这些歧义,最好在目标浏览器中测试jQuery伪选择器,或者:/ not not具体地落入对性能有重大影响的代码热点(如果你有一个受控目标浏览器环境)。

But if your target is all browsers, it looks like the best advice is to use what best fits your code, and avoid premature optimization.

但是如果您的目标是所有浏览器,那么最好的建议是使用最适合您代码的方法,并避免过早优化。

#2

$('.test').not('[multiple]').css('border','solid 1px red');

but if you are using IE 7 and below, borders in select elements won't change as expected..

但如果您使用的是IE 7及更低版本,则select元素中的边框不会按预期更改。

#3

Another way to keep it generic across the page without being restricted to class is this way -

另一种在整个页面中保持通用而不受限于类的方法就是这种方式 -

$("select[multiple='multiple']").each(function () {
    $('#'+this.id+' option:selected').prependTo(this);
});

JSFiddle link

#1