PavelKの答えはうまくいきました。ただし、理由は不明ですが、「data-stationID」を「data-sid」のようなものに変更する必要がありました。ケースが混在する問題である可能性がありますか?
複数のデータが必要な他の人のために、この行は、オプションにさらにデータを「スタック」する方法を示しています。
$('<option data-stationID="' +$(this).data('sid')+ '" data-lat="' +$(this).data('lat')+'" data-lon="' +$(this).data('lon')+'" ></option>').text($(this).data('city')).appendTo(city);
私のXML:
<states>
<state name="AK">
<option value="null" data-stationID="null" data-lat="null" data-lon="null" data-city="Select City">Select City</option>
<option value="326" data-stationID="9450460" data-lat="55.331799" data-lon="-131.626205" data-city="Ketchikan">Ketchikan</option>
<option value="327" data-stationID="9451054" data-lat="56.246700" data-lon="-134.647003" data-city="Port Alexander">Port Alexander</option>
</state>
<state name="CT">
<option value="null" data-stationID="null" data-lat="null" data-lon="null" data-city="Select City">Select City</option>
<option value="35" data-stationID="8461490" data-lat="41.361401" data-lon="-72.089996" data-city="New London">New London</option>
<option value="36" data-stationID="8465705" data-lat="41.283298" data-lon="-72.908302" data-city="New Haven">New Haven</option>
</state>
私の現在のコード:
$('#states').change(function() { // bind a trigger to when the states select changes
var val = $(this).val(); // hold the select's new value
var city = $('#cities').empty(); // empty the select of cities and hold a reference in 'city'
$('state', station_data).filter(function() { // get all states...
return val == $(this).attr('name'); // find the chosen state
}).find('option').each(function() { // Search Between/Within "<option..." for data ending in "city" & create a new option, set its text to the city [name], append to the cities select
$('<option>').text($(this).data('city')).appendTo(city);
})
});
$('#cities').change(function() { // bind a trigger to when the cities select changes
console.log($(this).val() );// prints selected city
});
私の質問は; ユーザーが都市を選択した後、「data-stationID」などのデータにアクセスするにはどうすればよいですか?せいぜい、私はすべてのstationID、またはオプションタグ内の最後のstationIDのいずれかしか取得できないようです。
ユーザーが情報を希望する都市を選択した後、オプションタグの間に保存されている他のすべての「データ-*」にアクセスできるので、データベース[または別のphpページ]にクエリを実行できます。
これを開始するために、xmlからの動的ロードデータのコードを使用して、jqueryのドロップダウンボックスを使用しました。
助けてくれてありがとう!
Ohgodwhyのリクエストによると、これは私のデータベースをクエリする私のphpコードです。
fwrite($fh, "<?xml version=\"1.0\"?>\n");
fwrite($fh, "<states>\n");
while($row=mysqli_fetch_array($states)) {
fwrite($fh, " <state name=\"${row['state']}\"> \n");
$queryCities="SELECT * FROM locations WHERE state='${row['state']}'";
$cities=mysqli_query($dbc,$queryCities);
fwrite($fh, " <option value=\"null\" data-stationID=\"null\" data-lat=\"null\" data-lon=\"null\" data-city=\"Select City\">Select City</option>\n");
while($row=mysqli_fetch_array($cities)) {
fwrite($fh, " <option value=\"${row['id']}\" data-stationID=\"${row['stationID']}\" data-lat=\"${row['latitude']}\" data-lon=\"${row['longitude']}\" data-city=\"".StripStuff($row['city'])."\">".StripStuff($row['city'])."</option>\n");
}
fwrite($fh, " </state>\n\n");
}
fwrite($fh, "</states>\n");
fclose($fh);
明確にするために、私はJQueryがこの情報をどのように処理するかわからないと思うので、アクセスする方法がわかりません。また、データをフォーマットするより良い方法があれば、phpコードを書き直して任意のフォーマットをエクスポートすることもできます...
これは私のXMLインポート/ロード関数です:
$.get('test2.xml', function(data) { // get the states.xml file
station_data = data; // save the data for future use so we don't have to call the file again
var state = $('#states'); // states select
$('state', station_data).each(function() { // find states in data & dynamically create a new option element & make its text the value of the "title" attribute in the XML & append it to the states select
$('<option>').text($(this).attr('name')).appendTo(state);
});
}, 'xml'); // specify what format the request will return - XML
JQueryバージョンの使用:jquery-1.8.2.min.js
JQuery Mobileバージョンの使用:jquery.mobile-1.2.0.min.js