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.
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: