선택 태그에서 데이터베이스에서 JavaScript로 값로드

Question

JavaScript를 처음 사용합니다. 내 문제는, 내가 선택한 3 HTML 태그가 있습니다. 하나는 국가를위한 것이고, 다음은 국가를위한 것이고 마지막 것은 도시를위한 것입니다. 나는 국가, 주, 도시와 같은 다른 테이블을 가지고있다. 문제는 특정 국가를 클릭하면 해당 상태가 자바 script.after로드 후 해당 도시로드해야합니다 상태를 클릭해야합니다 onchange 이벤트를 사용하여로드 될 것입니다.

하지만 코딩을 모르겠습니다. 아무도 가지고 있지 않으면 나를 보내주십시오. 그것은 급해. 내 상사가 내 결과를 기다리고 있습니다.

Answer 1

당신은 AJAX를 조사해야 할 것입니다. 성취하고자하는 것은 매우 일반적입니다. cascading dropdowns에 대해 빠른 Google 검색을 수행하면 예제가 많이 있습니다.

AJAX를 다루므로 브라우저 호환성을위한 건물은 시간이 많이 걸리는 작업이므로 jQuery과 같은 라이브러리로 시작하는 것이 좋습니다.

$('#my-select').change(function() { 
    // code that will be evaluated when #my-select changes 
}); 

거기에서, 당신과 같이 대략 Ajax 요청을 시작합니다 : : 위의 콜백에서

var country = $('#my-select').val(); 
$.post('/get-states', { country: country }, function(res) { 
    // code that will be evaluated when the ajax request completes 
}); 

는 다음과 같은 기본 구조를해야합니다, 당신은 시작하려면 하위 드롭 다운을 채 웁니다.

Answer 2

내가 올바르게 이해했다면, 당신이하고 싶은 것은 AJAX입니다.

onchange 이벤트가 발생하면 자바 스크립트 코드는 요청을 처리하는 서버의 PHP (또는 다른 서버 스크립트)에 요청을 보내고 데이터를 처리하고 사용자에게 출력하는 자바 스크립트로 데이터를 보냅니다.

나는 내 머리 꼭대기에서 코드를 직접 알지 못하지만, Jquery과 그 플러그인을 보면, 원하는 코드를 찾을 것이고, 전체 프로세스를 신속하게 어셈블 할 것을 권할 수 있습니다.

편집 : 그리고 난 당신의 다른 대답에 답변 덕분에 발견 Cascade Dropdown List using jQuery/PHP

Answer 3

JS :

var states = new Array(); 

states['Canada'] = new Array('Alberta','British Columbia','Ontario'); 
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco'); 
states['United States'] = new Array('California','Florida','New York'); 


// City lists 
var cities = new Array(); 

cities['Canada'] = new Array(); 
cities['Canada']['Alberta']   = new Array('Edmonton','Calgary'); 
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver'); 
cities['Canada']['Ontario']   = new Array('Toronto','Hamilton'); 

cities['Mexico'] = new Array(); 
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali'); 
cities['Mexico']['Chihuahua']  = new Array('Ciudad Juárez','Chihuahua'); 
cities['Mexico']['Jalisco']   = new Array('Guadalajara','Chapala'); 

cities['United States'] = new Array(); 
cities['United States']['California'] = new Array('Los Angeles','San Francisco'); 
cities['United States']['Florida'] = new Array('Miami','Orlando'); 
cities['United States']['New York'] = new Array('Buffalo','new York'); 


function setStates() { 
    cntrySel = document.getElementById('country'); 
    stateList = states[cntrySel.value]; 
    changeSelect('state', stateList, stateList); 
    setCities(); 
} 

function setCities() { 
    cntrySel = document.getElementById('country'); 
    stateSel = document.getElementById('state'); 
    cityList = cities[cntrySel.value][stateSel.value]; 
    changeSelect('city', cityList, cityList); 
} 

function changeSelect(fieldID, newOptions, newValues) { 
    selectField = document.getElementById(fieldID); 
    selectField.options.length = 0; 
    for (i=0; i<newOptions.length; i++) { 
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]); 
    } 
} 

// Multiple onload function created by: Simon Willison 
// http://simonwillison.net/2004/May/26/addLoadEvent/ 
function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
     if (oldonload) { 
     oldonload(); 
     } 
     func(); 
    } 
    } 
} 

addLoadEvent(function() { 
    setStates(); 
}); 

HTML :

를

<fieldset style="width: 230px;"> 
<legend><strong>Make your selection</strong></legend> 
<p> 
<form name="test" method="POST" action="processingpage.php"> 
<table> 
<tr> 
<td style="text-align: left;">Country:</td> 
<td style="text-align: left;"> 
<select name="country" id="country" onchange="setStates();"> 
    <option value="Canada">Canada</option> 
    <option value="Mexico">Mexico</option> 
    <option value="United States">United States</option> 
</select> 
</td> 
</tr><tr> 
<td style="text-align: left;">State:</td> 
<td style="text-align: left;"> 
<select name="state" id="state" onchange="setCities();"> 
    <option value="">Please select a Country</option> 
</select> 
</td> 
</tr><tr> 
<td style="text-align: left;">City:</td> 
<td style="text-align: left;"> 
<select name="city" id="city"> 
    <option value="">Please select a Country</option> 
</select> 
</td> 
</tr> 
</table> 
</form> 
</fieldset> 

구글로 5 초가 걸렸습니다. Plz 게시하기 전에 몇 가지 조사를 할.

원본 소스 : http://www.javascriptsource.com/forms/country-state-city-drop-down-list.html

Answer 4

당신은 당신이 당신이 사용하는 서버 측 기술에 따라 선택할 수있는 솔루션을 많이 얻을 것 인터넷을 검색하는 경우. 여기 http://beyondrelational.com/modules/2/blogs/80/posts/10655/cascading-drop-down-examplecountry-state-and-city-in-jquery.aspx

에 StackOverflow 당신이 다른 사람에서 할 일을 얻을 수있는 사이트가 아닙니다 ASP.Net 및 JQuery와

를 사용하여 하나입니다. 시간과 노력을 들이고 질문을 게시 할 때 대답이 없을 때까지 붙어 있어야합니다. 이런 이유로 귀하의 질문을 downmarking 해요.