jQuery屬性等於選擇器不工作

我在使用jQuery屬性equals選擇器時遇到了一些問題。jQuery屬性等於選擇器不工作

的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住。

請幫助我解決問題。

在此先感謝。

來源

2011-05-20 prajan

此外，任何關於修剪上述腳本的建議是有幫助的。 – prajan 2011-05-20 10:21:12

你應該使用ajax來處理這些事情，因爲通過ajax可以更容易地管理它，可以在服務器端動態驗證每個條目，並且在一個頁面中不需要太多的代碼，你可以將它們分開，所以在未來你會發現正確的數據更快 – Val 2011-05-20 10:39:40

這是因爲在運行代碼時，沒有任何選項將name屬性設置爲城市。將其更改爲使用像這樣生活的結合，它應該工作：

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

來源

2011-05-20 10:30:18

它工作的很好..謝謝richard .. – prajan 2011-05-20 10:47:42

@prajan np，隨時將其標記爲接受的答案（通過點擊勾號的輪廓） – 2011-05-20 10:53:05

.live不是因爲他並不期望在那裏添加動態元素。 – Val 2011-05-20 10:57:37

您已經使用

$("#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"

這就是說你應該真的使用類a s [name =「City」]不是很漂亮:)，可以說以後需要更改名稱標籤，以便與服務器端驗證相匹配，或者甚至在某些情況下使用mysql，則必須再次更改所有內容，在那裏作爲類不必改變:)

來源

2011-05-20 10:35:10 Val

謝謝你Val，你的建議使用ajax serverside驗證。我肯定會嘗試一下。 – prajan 2011-05-20 10:49:25

jQuery屬性等於選擇器不工作

回答

相關問題