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

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 
});