javascript - toLowerCase() with `filter` in jquery - Stack Overflow

admin管理员组

文章数量:1426115

How to use toLowerCase() with filter() in jquery?

Here is the dropdown that I have:

<select id="drpParty" name="drpParty" data-placeholder="Choose Party...." required="" class="chzn-select span8 row-fluid">
   <option value="-1" selected="" disabled="">Chose Customer</option>
   <option value="1">Party Ahmed</option>
   <option value="2">Party Ahmed</option>
   <option value="3">Ukraine</option>
   <option value="5">America</option>
   <option value="6">Indonesia</option>
   <option value="8">wheere</option>
   <option value="9">new party</option>
   <option value="10">Nwe Pary</option>
   <option value="11">Latest party </option>
   <option value="12">sha</option>
   <option value="13">shaj</option>
   <option value="14">My new party without salesman info</option>
   <option value="15">testing the latest party with hierarchy</option>
   <option value="16">testing the value</option>
   <option value="17">Kamran Ahmed</option>
   <option value="18">Testing a new party</option>
   <option value="19">Sale</option>
</select>

And I want to fetch the option that has "Sale" as it's text. I am using the following and it works perfectly that the option is being found:

var lookup = 'Sale';
var elem=$('#drpParty option:contains('+ lookup +')').filter(function() {
    return $(this).text() === lookup;
});

console.log(elem.val());

Now the text Sale may not necessarily be in this case inside the drop down i.e. it may be all upper case or all lower case, so I am trying this i.e. making the text of the option lower case and then paring it with the lookup:

var lookup = 'sale';
var elem=$('#drpParty option:contains('+ lookup +')').filter(function() {
    return $(this).text().toLowerCase() === lookup;
});

console.log(elem.val());

But it doesn't work then i.e. the option is not fetched. What am I doing wrong with the parison that it doesn't return this element in this case?

Fiddle here /

How to use toLowerCase() with filter() in jquery?

Here is the dropdown that I have:

<select id="drpParty" name="drpParty" data-placeholder="Choose Party...." required="" class="chzn-select span8 row-fluid">
   <option value="-1" selected="" disabled="">Chose Customer</option>
   <option value="1">Party Ahmed</option>
   <option value="2">Party Ahmed</option>
   <option value="3">Ukraine</option>
   <option value="5">America</option>
   <option value="6">Indonesia</option>
   <option value="8">wheere</option>
   <option value="9">new party</option>
   <option value="10">Nwe Pary</option>
   <option value="11">Latest party </option>
   <option value="12">sha</option>
   <option value="13">shaj</option>
   <option value="14">My new party without salesman info</option>
   <option value="15">testing the latest party with hierarchy</option>
   <option value="16">testing the value</option>
   <option value="17">Kamran Ahmed</option>
   <option value="18">Testing a new party</option>
   <option value="19">Sale</option>
</select>

And I want to fetch the option that has "Sale" as it's text. I am using the following and it works perfectly that the option is being found:

var lookup = 'Sale';
var elem=$('#drpParty option:contains('+ lookup +')').filter(function() {
    return $(this).text() === lookup;
});

console.log(elem.val());

Now the text Sale may not necessarily be in this case inside the drop down i.e. it may be all upper case or all lower case, so I am trying this i.e. making the text of the option lower case and then paring it with the lookup:

var lookup = 'sale';
var elem=$('#drpParty option:contains('+ lookup +')').filter(function() {
    return $(this).text().toLowerCase() === lookup;
});

console.log(elem.val());

But it doesn't work then i.e. the option is not fetched. What am I doing wrong with the parison that it doesn't return this element in this case?

Fiddle here http://jsfiddle/7xK82/

• javascript
• jquery
• dom

Share Improve this question Follow asked Dec 2, 2013 at 10:41 Kamran AhmedKamran Ahmed 12.5k2323 gold badges7272 silver badges103103 bronze badges 3

• 2 Please be careful when you do this sort of parison using toLowerCase() explicitly. It doesn't work in every language (first example that es to my mind is Turkey) so if your web site must work with international customers. – Adriano Repetti Commented Dec 2, 2013 at 10:48
• @Adriano: once we start there things go a long way downhill -- all sorts of edge cases e up when we start to try and support "international" characters, which people would expect to be supported as it's mostly implemented correctly. – Qantas 94 Heavy Commented Dec 2, 2013 at 10:51
• @Qantas94Heavy I agree but IMO nowadays they're not such corner cases and in this case toLocaleLowerCase() would at least minimize some of them... – Adriano Repetti Commented Dec 2, 2013 at 11:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The :contains jQuery selector is case sensitive, so you'd need to filter for it manually as you've already done. What you should do is just remove the :contains part of your selector, and just grab all the <option> and filter through them, for example:

var lookup = 'sale';
var elem = $('#drpParty > option').filter(function() {
    return $(this).text().toLowerCase() === lookup.toLowerCase();
});

Note that for performance reasons, it's often better to explicitly specify in your selector that it's a child element by using > instead of just looking for any descendants of your <select> element.

Just pare them insensitively

var lookup = 'Sale';
var insensitive = lookup.toLowerCase();
var elem=$('#drpParty').find('option').filter(function() {
    return $(this).text().toLowerCase() === insensitive;
});

console.log(elem.val());

http://jsfiddle/7xK82/4/

You could make your own case insensitive contains filter

// to make :contains case insensitive!!!
$.expr[":"].contains = $.expr.createPseudo(function (arg) {
    return function (elem) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

After the above codes executes the :contains filter will bee case insensitive and you can use it anywhere without any other care about character casing. Make sure it runs only after the jQuery is loaded and it needs to run only once. It might break if / when jQuery changes it's internal functions and structure again.

本文标签： javascripttoLowerCase() with filter in jqueryStack Overflow