jQuery属性等于选择器不起作用

时间：2011-05-20 10:20:12

标签： jquery

我在使用jQuery属性equals选择器时遇到了一些问题。

HTML部分：

<!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>

和脚本部分：

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

    });
});

当“城市”下拉列表启用且为空时，在“城市”下拉列表模糊时，会弹出一个警告框，上面写着“选择城市”。但它没有出现。

以上代码可在jsfiddle直播。

请帮助我解决问题..

提前致谢。

2 个答案:

答案 0 :(得分：6)

这是因为在运行代码时，没有选项将name属性设置为City。将其更改为使用这样的实时绑定，它应该可以工作：

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

答案 1 :(得分：2)

您已使用

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

然后查看你的HTML 

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

name=""应该是name="City"

的位置

那说你应该真正使用类，因为[name =“City”]并不漂亮:)，假设您需要稍后更改名称标签，无论出于何种原因与您的服务器端验证相匹配，甚至是mysql在某些情况下，你必须再次改变一切，因为班级不必改变：）

相关问题
最新问题