質問を明確にするために、ここに私のシナリオがあります：
モバイル デバイスで使用するための小さな登録フォームがあります。
当然のことながら、私はデスクトップでフォームを開発しており、ほとんどのテストはデスクトップで行われています。<select>私もモバイルデバイスでテストしましたが、ほとんどの場合、すべてが機能します -タグと一緒にバインドするときの JQuery の「クリック」イベントを除きます。
私のフォームには 3 つ<select>のフィールドがあり、それらはすべて動的にデータを取得します。「国」をクリックすると、JQuery がclickイベントを発生させ、AJAX を使用して私のサーバーから国のリストを取得します。ユーザーが「州」をクリックすると、最初の選択で選択された国に属するすべての州が取得されます。この動作は「都市」に対して繰り返されます。
ここにスクリーンショットがあります: (「País」は国を意味します。「Estado/Departamento」は州、「Ciudad」は都市です。スペイン語の名前で申し訳ありません。私の実際のコードは英語なので、あまり心配する必要はありません!)
上のスクリーンショットでは、実際に動作していることがわかります。
3 つの select 要素は次のとおりです。
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>
機能しなかった解決策が見つかりました
私はしばらくグーグルで調べて、いくつかの解決策を見つけました。悲しいことに、それらのどれも機能しませんでした。
vclickまず、jQuery モバイルとそのイベントについて学びました。これはうまくいくだろうとほぼ確信していましたが、うまくいきませんでした。選択したタグの vclick イベントが存在しないという Chrome の苦情。
2 つ目は、残りのコードがロードされた後でjQuery Mobile をロードするように指示されたことです。終了タグの直前にスクリプトをロードしました</body>が、状況は改善されませんでした。
最後に、落胆するかもしれませんが、クリックイベントはselectタグで公式にサポートされていないようです. 正直なところ、私はここで完全に迷っています。
私の質問に直接答える方法がない場合、モバイルでもクリックされたらすぐに選択タグにオプションを入力する最良の方法は何ですか?