jQuery .inArray() always true?

Question

I'm trying to use inarray but its always returning true? Any ideas? (all li's are showing)

$("#select-by-color-list li").hide();

// get the select
var $dd = $('#product-variants-option-0');

if ($dd.length > 0) { // make sure we found the select we were looking for

    // save the selected value
    var selectedVal = $dd.val();

    // get the options and loop through them
    var $options = $('option', $dd);
    var arrVals = [];
    $options.each(function(){
        // push each option value and text into an array
        arrVals.push({
            val: $(this).val(),
            text: $(this).text()
        });
    });




};

//This is where it is returning true...


if($.inArray('Aqua', arrVals)) {
    $("#select-by-color-list li#aqua").show();
    };
    if($.inArray('Army', arrVals)) {
    $("#select-by-color-list li#army").show();
    };

user113716 · Accepted Answer · 2010-12-29 22:01:12Z

58

You need to do this:

if( $.inArray('Aqua', arrVals) > -1 ) {

or this:

if( $.inArray('Aqua', arrVals) !== -1 ) {

The $.inArray() method returns the 0 based index of the item. If there's no item, it returns -1, which the if() statement will consider as true.

From the docs:

Because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), if we're checking for the presence of value within array, we need to check if it's not equal to (or greater than) -1.

EDIT: Instead of pushing both values into the array as an object, just use one or the other, so you have an Array of strings from which you can build a multiple selector.

One way is like this:

  // Create an Array from the "value" or "text" of the select options
var arrVals = $.map( $dd[0].options, function( opt, i ){
    return opt.value || opt.text;
});

  // Build a multiple selector by doing a join() on the Array.
$( "#" + arrVals.join(',#') ).show();

If the Array looks like:

['Army','Aqua','Bread'];

The resulting selector will look like:

$( "#Army,#Aqua,#Bread" ).show();

edited Dec 29, 2010 at 22:01

answered Dec 29, 2010 at 21:40

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Charles Marsh Over a year ago

here is the select list...<select class="single-option-selector" id="product-variants-option-0"><option value="Gunmetal Heather">Gunmetal Heather</option><option value="Kelly Green">Kelly Green</option><option value="Blackberry">Blackberry</option></select>

user113716 Over a year ago

@Charles: This is because the arrVals Array doesn't contain 'Army' or 'Aqua', but instead contains an object where either the key or value (not sure which) has the String you want.

Charles Marsh Over a year ago

How can I base an if statement on it?

user113716 Over a year ago

@Charles: Is there some reason you need both the val() and text() as the key/value pair? Why not just one or the other? If you do that, you could actually skip the inArray, and just build a multiple selector that selects all elements in the Array. I'll give an example in a minute.

Charles Marsh Over a year ago

Thanks VERY much! I've just realised I was trying something out with that and it shouldn't be in there any longer I only need the val()... Thankg again!

|

StudioTime · Accepted Answer · 2017-02-22 12:53:54Z

2

ES6 to the rescue! Although not jQuery I thought worth answering for future readers...

ES6 introduces .includes() which works as you think $.inArray SHOULD work:

const myArray = ["a", "b", "c"];

console.log(myArray.includes("a")) /* true */
console.log(myArray.includes("d")) /* false */

Array.prototype.includes()

answered Feb 22, 2017 at 12:53

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

Collectives™ on Stack Overflow

jQuery .inArray() always true?

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related