Jquery/html - check if selected option is in one of 4 arrays, then perform function

Question

I've looked around the web/other questions for help wit this, but can't quite figure it out and assume I'm not using the correct keywords.

I'm trying to do something based on a value a user selects from a dropdown menu on a webform. The logic is;

The user selects an option from a dropdown
The script checks whether that option is in either array 1,2,3,4
Depending on what array it's in, it displays a different HTML div

It sounds simple in my head, but i haven't the smallest idea where to start. Appreciate any help as always.

Some help to find value in array: http://stackoverflow.com/questions/143847/best-way-to-find-an-item-in-a-javascript-array — Chris, Feb 06 '13 at 14:07
For the quickest answer, try looking at the answers of the `related` & `linked` links posted in this page. This has been asked so many times that i feel its not necessary to write again. — Zubair1, Feb 13 '13 at 03:12
Posting an answer as I mis-understood your requirements alittle. — Zubair1, Feb 13 '13 at 04:09

score 0 · Accepted Answer · answered Feb 13 '13 at 04:09

Doing this real quick so i'm sure it can be improved.

There are two ways coming in my mind, the first would be using .indexOf:

<script type="text/javascript>
    $(document).ready(function()
    {
        var selectedVal = 'asd';
        var selectedIndex;

        var arrayHolder; //should hold the array the value was found in
        var arr1 = ['huh', 'asd'];
        var arr2 = ['asdasd'];
        var arr3 = ['asdasdasd'];
        var arr4 = ['asdasdasdasd'];

        //arr1
        arrayHolder = arr1;
        selectedIndex = arrayHolder.indexOf('asd');

        if (!selectedIndex)
        {
            //arr2
            arrayHolder = arr2;
            selectedIndex = arrayHolder.indexOf('asd');

            if (!selectedIndex)
            {
                //arr3
                arrayHolder = arr3;
                selectedIndex = arrayHolder.indexOf('asd');

                if (!selectedIndex)
                {
                    //arr4
                    arrayHolder = arr4;
                    selectedIndex = arrayHolder.indexOf('asd');

                    if (!selectedIndex)
                    {
                        alert(selectedVal + ' not found in all 4 arrays.');
                    }
                }
            }
        }

        //By here, you should know if a value was found and in which array
        alert(arrayHolder);//contains the array in which the value was found
        alert(selectedIndex);//The index number where it was found

        //test
        console.log(arrayHolder[selectedIndex]);
    });
</script>

The second way is to do it using jQuery's inArray:

<script type="text/javascript>
    $(document).ready(function()
    {
        var selectedVal = 'asd';
        var selectedIndex;

        var arrayHolder; //should hold the array the value was found in
        var arr1 = ['huh', 'asd'];
        var arr2 = ['asdasd'];
        var arr3 = ['asdasdasd'];
        var arr4 = ['asdasdasdasd'];

        //check first array
        arrayHolder = arr1;
        selectedIndex = $.inArray(selectedVal, arrayHolder);

        //check if found in first array, if not check next array
        if (!selectedIndex)
        {
            arrayHolder = arr2;
            selectedIndex = $.inArray(selectedVal, arrayHolder);

            //check if found in second array, if not check next array
            if (!selectedIndex)
            {
                arrayHolder = arr3;
                selectedIndex = $.inArray(selectedVal, arrayHolder);

                //check if found in third array, if not check next array
                if (!selectedIndex)
                {
                    arrayHolder = arr4;
                    selectedIndex = $.inArray(selectedVal, arrayHolder);

                    //check if found in third array, if not check next array
                    if (!selectedIndex)
                    {
                        alert(selectedVal + ' not found in all 4 arrays.');
                    }
                }
            }
        }

        //By here, you should know if a value was found and in which array
        alert(arrayHolder);//contains the array in which the value was found
        alert(selectedIndex);//The index number where it was found

        //test
        console.log(arrayHolder[selectedIndex]);
    });
</script>

.indexOf support

NOTE: .indexOf() is not supported on all browsers (specifically speaking for IE). So if you want to use indexOf(), you should use the below code above all first, to add support for it in all browsers (credit to mozilla for the code).

<script type="text/javascript">
        if (!Array.prototype.indexOf)
        {
          Array.prototype.indexOf = function(elt /*, from*/)
          {
            var len = this.length >>> 0;

            var from = Number(arguments[1]) || 0;
            from = (from < 0)
                 ? Math.ceil(from)
                 : Math.floor(from);
            if (from < 0)
              from += len;

            for (; from < len; from++)
            {
              if (from in this &&
                  this[from] === elt)
                return from;
            }
            return -1;
          };
        }
</script>

Sorry for the delay replying, that's absolutely excellent, thank you very much :-) — Carl Bembridge, Feb 21 '13 at 10:46

Jquery/html - check if selected option is in one of 4 arrays, then perform function

1 Answers1

.indexOf support