0

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

4

1 に答える 1

0

それは明確な方法ではないと思いますが、XMLからオプションタグを直接追加して選択することができます。これを試してください、それはうまくいくはずです：

アップデート：

$('#states').on('change', function() { // bind a trigger to when the states select changes
        var state = $(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 state == $(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 data-stationID="'+$(this).data('stationID')+'"></option>').text($(this).data('city')).appendTo(city);
        })
    });

$('#cities').on('change', function() { // bind a trigger to when the cities select changes
        console.log($(this).children('option:selected:eq(0)').attr('data-stationID') );// prints selected city's attr
});
于 2013-01-12T20:54:55.927 に答える