有沒有辦法在使用移動瀏覽器時，使用JQuery上的select標籤進行「單擊」事件？

Question

爲了澄清，問題，這裏是我的場景：

我有一個小的註冊表單，是爲了在移動設備上使用。

當然，我一直在我的桌面上開發窗體，我的大部分測試都是在桌面上完成的。我也使用移動設備進行了測試，大部分情況下，一切正常 - 除了JQuery的「單擊」事件與<select>標籤綁定在一起時。

我的表單中有三個<select>字段，它們都動態獲取數據。這個想法是，你點擊「國家」，JQuery觸發一個click事件，然後使用AJAX從我的服務器獲取國家列表。當用戶點擊「狀態」時，它將獲取屬於第一次選擇所選國家的所有狀態。這種行爲重複「城市」。

下面是截圖：（「País」表示國家，「Estado/Departamento」是州，「Ciudad」是城市 - 我爲西班牙名字表示歉意，我的實際代碼是英文的，所以不要太擔心這個！）

在上面的截圖，你可以看到它的實際工作。

三個選擇元素都在這裏：

Pais: <select class="form-control" name="country" id="country"></select> 
Estado/Departamento: <select class="form-control" name="state" id="state"></select> 
Ciudad: <select class="form-control" name="city" id="city"></select> 

我的jQuery代碼：

    <script> 
       $(document).ready(function(){ 

        //Actual listeners 

        $("#country").click(function(event){ 
          $.get("pseudoapi/getCountries.php", function(data){ 
           var countries = $("#country"); 
           countries.empty(); 
           for(var i = 0; i < data.length; i++) 
           { 
            countries.append("<option value='" + data[i]['id'] +"'>"+ data[i]['name'] +"</option>"); 
           } 
          }, "json"); 
        }); 

        $("#state").click(function(event) 
        { 
         $.get("pseudoapi/getStates.php", {country_id : $("#country").val()}, function(data){ 
          var state = $("#state"); 
          state.empty(); 
          for(var i = 0; i < data.length; i++) 
          { 
           state.append("<option value='" + data[i]['id'] +"'>"+ data[i]['name'] +"</option>"); 
          } 
         }, "json"); 
        }); 

        $("#city").click(function(event) 
        { 
         $.get("pseudoapi/getCities.php", {country_id : $("#country").val(), state_id : $("#state").val()}, function(data){ 
          var city = $("#city"); 
          city.empty(); 
          for(var i = 0; i < data.length; i++) 
          { 
           city.append("<option value='" + data[i]['id'] +"'>"+ data[i]['name'] +"</option>"); 
          } 
         }, "json"); 
        }); 
       }); 

       $("#country").change(function(event){ 
        $("#state").empty(); 
        $("#city").empty(); 
       }); 

       $("#state").change(function(event){ 
        $("#city").empty(); 
       }); 
       </script> 

找到

我用Google搜索了一會兒，發現沒有工作一個解決方案解決方案很少可悲的是他們都沒有工作。

首先，我瞭解了jQuery mobile及其vclick事件。我幾乎肯定這會起作用，但事實並非如此。 Chrome對選擇標記不存在vclick事件的投訴。

其次，我被告知加載jQuery Mobile 後我的代碼的其餘部分加載。我在結束</body>標記之前加載了腳本，但它並未使情況更好。

最後，也許令人沮喪，但它看起來像click事件沒有官方支持的選擇標籤，因此，它會據說在一些瀏覽器，但不是在其他人。說實話，我完全迷失在這裏。

如果沒有辦法直接回答我的問題，那麼即使在移動設備上點擊選項，選擇標籤的最佳方式是什麼？

Answer 1

你爲什麼不加載在頁面載入國家和分配的變化事件的選擇，所以當用戶選擇一個國家，它會填充美國對該國和國家做同樣的