jQuery attribute equals selector not working
<p>I have some problem in using the jQuery attribute equals selector. </p>

<p>The HTML part:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;form name="form1" id="form1" method="post"&gt;
 &lt;table&gt;
 &lt;tr&gt;
    &lt;td&gt;Country Living In&lt;/td&gt;
    &lt;td&gt;
    &lt;select class="FormInput" name="Country" id="Country"&gt;
    &lt;option label="India" value="1" selected="selected"&gt;India&lt;/option&gt;
    &lt;option label="USA" value="2"&gt;USA&lt;/option&gt;
    &lt;option label="United Kingdom" value="3"&gt;United Kingdom&lt;/option&gt;
    &lt;option label="Australia" value="6"&gt;Australia&lt;/option&gt;
    &lt;option label="Malaysia" value="125"&gt;Malaysia&lt;/option&gt;
    &lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;

 &lt;tr id="stateRow"&gt;
    &lt;td&gt;State&lt;/td&gt;
    &lt;td&gt;
    &lt;select class="FormInput" id="SelectState" disabled="disabled" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select State -&lt;/option&gt;
    &lt;/select&gt;
    &lt;select class="FormInput" name="State" id="State"&gt;
        &lt;option selected="selected" value=""&gt;- Select State -&lt;/option&gt;
        &lt;option value="1"&gt;Andaman and Nicobar&lt;/option&gt;
        &lt;option value="2"&gt;Andhra Pradesh&lt;/option&gt;
        &lt;option value="3"&gt;Arunachal Pradesh&lt;/option&gt;
        &lt;option value="4"&gt;Assam&lt;/option&gt;
    &lt;/select&gt;
    &lt;/td&gt;
&lt;/tr&gt;
  &lt;tr id="cityRow"&gt;
    &lt;td&gt;City&lt;/td&gt;
    &lt;td&gt;
    &lt;select class="FormInput" id="SelectCity" disabled="disabled"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
    &lt;/select&gt;

    &lt;div id="INDIA-cities"&gt;
    &lt;select class="FormInput" id="INDIA-1" name="" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
        &lt;option value="1"&gt;Car Nicobar&lt;/option&gt;
        &lt;option value="2"&gt;Port Blair&lt;/option&gt;
        &lt;option value="3"&gt;Rest of Andaman and Nicobar&lt;/option&gt;
    &lt;/select&gt;

    &lt;select class="FormInput" id="INDIA-2" name="" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
        &lt;option value="4"&gt;Adilabad&lt;/option&gt;
        &lt;option value="5"&gt;Anantapur&lt;/option&gt;
        &lt;option value="6"&gt;Chittoor&lt;/option&gt;
    &lt;/select&gt;
    &lt;select class="FormInput" id="INDIA-3" name="" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
        &lt;option value="29"&gt;Along&lt;/option&gt;
        &lt;option value="30"&gt;Anini&lt;/option&gt;
        &lt;option value="31"&gt;Bomdila&lt;/option&gt;
      &lt;/select&gt;

    &lt;select class="FormInput" id="INDIA-4" name="" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
        &lt;option value="46"&gt;Baksa&lt;/option&gt;
        &lt;option value="47"&gt;Barpeta&lt;/option&gt;
        &lt;option value="48"&gt;Bongaigaon&lt;/option&gt;
        &lt;option value="49"&gt;Chirang&lt;/option&gt;
        &lt;option value="50"&gt;Dhemaji&lt;/option&gt;
    &lt;/select&gt;
    &lt;/div&gt;

    &lt;select class="FormInput" id="USA-City" name="" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
        &lt;option value="664"&gt;Abilene&lt;/option&gt;
        &lt;option value="665"&gt;Akron&lt;/option&gt;
        &lt;option value="666"&gt;Albany&lt;/option&gt;
        &lt;option value="667"&gt;Albuquerque&lt;/option&gt;
        &lt;option value="668"&gt;Alexandria&lt;/option&gt;
        &lt;option value="867"&gt;Others&lt;/option&gt;
    &lt;/select&gt;

    &lt;select class="FormInput" id="UK-City" name="" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
        &lt;option value="868"&gt;Cambridge&lt;/option&gt;
        &lt;option value="869"&gt;London&lt;/option&gt;
        &lt;option value="870"&gt;Liverpool&lt;/option&gt;
        &lt;option value="871"&gt;Manchester&lt;/option&gt;
        &lt;option value="876"&gt;Others&lt;/option&gt;
    &lt;/select&gt;

    &lt;select class="FormInput" id="AUSTRALIA-City" name="" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
        &lt;option value="877"&gt;Sydney&lt;/option&gt;
        &lt;option value="878"&gt;Melbourne&lt;/option&gt;
        &lt;option value="879"&gt;Brisbane&lt;/option&gt;
        &lt;option value="880"&gt;Perth&lt;/option&gt;
        &lt;option value="881"&gt;Others&lt;/option&gt;
    &lt;/select&gt;

    &lt;select class="FormInput" id="MALAYSIA-City" name="" style="display:none"&gt;
        &lt;option value="" selected="selected"&gt;- Select City -&lt;/option&gt;
        &lt;option value="882"&gt;Subang Jaya&lt;/option&gt;
        &lt;option value="883"&gt;Kuala Lumpur&lt;/option&gt;
        &lt;option value="884"&gt;Klang&lt;/option&gt;
        &lt;option value="885"&gt;Johor Bahru&lt;/option&gt;
        &lt;option value="886"&gt;Ampang Jaya&lt;/option&gt;
        &lt;option value="887"&gt;Others&lt;/option&gt;
    &lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td colspan="2"&gt;&lt;input type="submit" value="submit"&gt;&lt;/td&gt;
&lt;/tr&gt;
 &lt;/table&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and the script part:</p>

<pre><code>$(document).ready(function(){

    var stateRow = $("#stateRow"),
        cityRow = $("#cityRow"),
        SelectState = $("#SelectState"),
        SelectCity = $("#SelectCity"),
        State = $("#State"),
        Country = $("#Country"),
        USAcity = $("#USA-City"),
        UKcity = $("#UK-City"),
        AUSTRALIAcity = $("#AUSTRALIA-City"),
        MALAYSIAcity = $("#MALAYSIA-City");    

    Country.change(function() {
        var sCountry = $(this).val();
        stateRow.hide();
        SelectState.hide();
        SelectCity.hide();
        cityRow.hide();
        $('#INDIA-cities').hide();
        State.hide().attr({
                name: '',
                disabled: true
            });
        $('#INDIA-cities select').each(function(){
            //this.id = this.id + "_" + i;
            $(this).attr({
                name: '',
                disabled: true
            });
        USAcity.hide().attr({
                name: '',
                disabled: true
            });
        UKcity.hide().attr({
                name: '',
                disabled: true
            });
        AUSTRALIAcity.hide().attr({
                name: '',
                disabled: true
            });
        MALAYSIAcity.hide().attr({
                name: '',
                disabled: true
            });
        });

        if(sCountry=="1") {
            stateRow.show();
            State.show().attr({
                name: 'State',
                disabled: false
            });
            cityRow.show();
            SelectCity.show();
        }
        else if(sCountry=="2") {
            cityRow.show();
            USAcity.show().attr({
                name: 'City',
                disabled: false
            });
        }
        else if(sCountry=="3") {
            cityRow.show();
            UKcity.show().attr({
                name: 'City',
                disabled: false
            });
        }
        else if(sCountry=="6") {
            cityRow.show();
            AUSTRALIAcity.show().attr({
                name: 'City',
                disabled: false
            });
        }
        else if(sCountry=="125") {
            cityRow.show();
            MALAYSIAcity.show().attr({
                name: 'City',
                disabled: false
            });
        }
    });

    State.change(function() {
        sState = $(this).val();
        $('#INDIA-cities').hide();
        var len = this.length;
        if(sState != '')
        {
            SelectCity.hide();
            $('#INDIA-cities').show();
            for(i=1;i&lt;=len;i++){
                var citylist = $("#INDIA-"+i);
                if (sState != $(this[i]).val()) {
                    citylist.hide().attr('name','');
                }
                else
                {
                    citylist.show().attr({
                        name: 'City',
                        disabled: false
                    });
                }
            }
        }
        else
        {
            SelectCity.show();
            for(i=1;i&lt;=len;i++){
                var citylist = $("#INDIA-"+i);
                citylist.hide().attr('name','');
            }
        }
    });

    State.blur(function(){
            if($(this).val()=='')
            {
                alert("Select State");
                return false;
            }
            else
            {
                return true;
            }

    });

    $("#cityRow").find('select[name="City"]').blur(function(){
            if($(this).val()=='')
            {
                alert("Select City");
                return false;
            }
            else
            {
                return true;
            }

    });
});
</code></pre>

<p>When the 'City' dropdown is enabled and is empty, then an alert box should pop out saying 'Select City', on blur of the 'City' dropdown. But its not showing up.</p>

<p>The above code is available live at <a href="http://jsfiddle.net/prajan55/CwPTZ/" rel="nofollow">jsfiddle</a>.</p>

<p>Kindly help me in solving the issue.. </p>

<p>Thanks in advance.</p>
