0

Pavel K 的回答奏效了。但是，由于未知原因，我需要将“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 回答