CODEWITHSUNDEEP
jquery
prajan
prajan

Reputation: 189

jQuery attribute equals selector not working

I have some problem in using the jQuery attribute equals selector.

The HTML part:

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

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

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

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

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

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

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

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

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

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

and the script part:

$(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<=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<=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;
            }

    });
});

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.

The above code is available live at jsfiddle.

Kindly help me in solving the issue..

Thanks in advance.

Upvotes: 3

Views: 6600

Answers (2)

Val
Val

Reputation: 17522

You have used 

$("#cityRow").find('select[name="City"]').blur(function(){

and then looking at your html you have 

<select class="FormInput" id="INDIA-1" name="" style="display:none">
        <option value="" selected="selected">- Select City -</option>
        <option value="1">Car Nicobar</option>
        <option value="2">Port Blair</option>
        <option value="3">Rest of Andaman and Nicobar</option>
    </select>

Where the name="" should be name="City"

That said you should really be using classes as [name="City"] is not pretty :), lets say you need to change the name tag later on for whatever reasons to match that of your serverside validations, or even mysql in some cases, you would have to change everything again, where as class do not have to change :)

Upvotes: 2

Richard Dalton
Richard Dalton

Reputation: 35793

It's because none of the selects have the name attribute set to the City when the code is run. Change it to use live binding like this and it should work:

$("#cityRow").find('select[name="City"]').live('blur', function(){

Upvotes: 6

Related Questions