Finding items in an array with jQuery.inArray
<p>I'm trying to simply determine whether an element exists in an array. I'm basically looking to find out if a selected country in a <code>&lt;select&gt;</code> control exists in an <code>&lt;optgroup&gt;</code> in another <code>&lt;select&gt;</code>... think countries and territories:</p>

<pre><code>&lt;select id="countries"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    &lt;option value="US"&gt;United States&lt;/option&gt;
    &lt;option value="IL"&gt;Israel&lt;/option&gt;
    &lt;option value="CA"&gt;Canada&lt;/option&gt;
&lt;/select&gt;

&lt;select id="territories"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    &lt;optgroup label="USA"&gt;
        &lt;option value="CA"&gt;California&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="CA"&gt;
        &lt;option value="ON"&gt;Ontario&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>// build array of available territories for counties
var territoryCountries = [];
$("select#territory optgroup").each(function() {
    territoryCountries[territoryCountries.length] = $(this).attr('label');
});

// on change 
$("select#country").change(function() {
    if (!$.inArray($(this).val(), territoryCountries)) {
        console.log("Not found, disable the territory input.");
    } else {
        console.log("Found, disable all unrelated territories.");
    }
});
</code></pre>

<p>The problem I'm having is that it's not working. It shows that 'IL' does exist in territoryCountries, when it doesn't, and shows that 'USA' doesn't exist in territoryCountries, when it does. </p>

<p>What am I doing wrong? You can view and run the code at <a href="http://jsfiddle.net/rfkrocktk/2hgbq/" rel="nofollow">JSFiddle</a>.</p>

<ul>
<li>Additionally, I'm simply looking to do a country/territory select input. Is there a better way to do this? I feel like I'm majorly re-inventing the wheel to do it by hand. </li>
</ul>
