Question

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。

这个想法是，在用户选择了他们想要的信息的城市后，我可以访问存储在选项标签之间的所有其他“data- *”，这样我就可以查询我的db [或其他php页面]

我使用了dynamic load data from xml to drop down box with jquery中的代码来启动它。

感谢您的帮助！

Per 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

Answer 1

我认为这不是一个明确的方法，但您可以直接从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
});

如何使用JQuery访问存储在XML中的“额外数据”以填充下拉列表

1 个答案: