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를 얻을 수있을뿐, option 태그 안에 마지막 stationID 만 얻을 수있는 것처럼 보인다.

사용자가 정보를 원하는 도시를 선택하면 옵션 태그 사이에 저장된 다른 모든 "데이터 - *"에 액세스 할 수 있으므로 데이터베이스 [또는 다른 PHP 페이지]

나는 이것을 시작하기 위해 dynamic load data from xml to drop down box with jquery에서 코드를 사용했다.

도움 주셔서 감사합니다.

Per Ohgodwhy 님의 요청에 따라 db를 쿼리하는 PHP 코드입니다.

분명히하기 위해 JQuery가이 정보를 처리하는 방법을 알지 못해서 액세스하는 방법을 모르겠습니다.

$.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와 버전을 사용 : 또한, 나는 분명히 ... 내가 데이터를 포맷해야 더 좋은 방법이 있다면 어떤 형식을 내보낼

를 PHP 코드를이 내 XML 가져 오기 /로드 기능입니다 다시 작성할 수 있습니다 : JQuery와-1.8.2.min.js JQuery와 모바일 버전 사용

: jquery.mobile-1.2.0.min.js

Answer 1

내가 그 분명 방법이 아니다 생각하지만, 당신이 XML에서 옵션 태그를 추가 할 수 있습니다 직접 선택하십시오. 이 시도, 그것은 작동합니다 :

이

업데이트 : 당신은 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 
});