다른 드롭 다운 선택시 채우기 드롭 다운

Question

두 개의 드롭 다운 상자가 있습니다. 첫 번째 드롭 다운 상자에서 선택 항목에 두 번째 드롭 다운 상자를 채 웁니다. 내 값은 데이터베이스에서 검색하고 있습니다. 이 가능한 PHP를 사용하지 않고 또는 중간 아약스 및 PHP 파일을 첫 번째 드롭 다운 값을 채우고 값 파일을 필요합니다. 또는 이것은 PHP를 사용하지 않고 가능하다. 나는 Jquery만을 사용한다. 제게 그 일을 암시 해주세요.

저는 2 개국이 있다고 가정합니다. 첫 번째는 인도이고 두 번째는 미국입니다. 첫 번째 드롭 다운에서 국가를 선택하고 두 번째 드롭 다운보다 첫 번째 드롭 다운이 선택되면 각 국가가 채워집니다.

Answer 1

어느 쪽이든 할 수 있습니다. 아약스를 사용하고 싶지 않다면 모든 옵션을 객체에로드하면됩니다. 그런 다음 select # 1에서 무언가를 선택하면 # 2에 해당 객체의 데이터 어레이가 채워집니다.

만약 내가 그것을하고 있었다면, 나는 엄청난 양의 데이터가 없다면 아약스로하지 않을 것이다.

Answer 2

쉬운 예를 들어 보겠습니다. 원하는 용도로 사용하고 있습니다. 완벽하게 잘 작동합니다.

<select name="region" id="region" ></select> 

는 이제 별도의 파일 이름 crlist.js을하고 같은 코드 위에 갖는 페이지에 포함 :

<?php 
     $countrylist=mysql_query("SELECT * FROM country ORDER BY name ASC"); 
     echo "<select name='country' id='country' onchange=\"reload(this.form)\" title='Country e:g; United Kingdom,Pakistan'><option value='0'>Select Country</option>"; 
     while($clist=mysql_fetch_array($countrylist)) 
     { 
      echo "<option value='$clist[Name]'>$clist[Name]</option>"."<br/>"; 
     } 
     echo "</select>"; 
?> 

이이 지역 드롭 다운은 다음과 같습니다

이

는 국가 드롭 다운입니다 : crlist.js에 대한

<script type="text/javascript" src="crlist.js"> </script> 

코드 :

,536,913,632 10

var request = false; 
/*@cc_on @*/ 
/*@if (@_jscript_version >= 5) 
try { 
request = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (e) { 
try { 
request = new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e2) { 
request = false; 
} 
} 
@end @*/ 
function fillSelect(country,path) { 
var url = path+"crlist.php?country=" + country; 
request.open("GET", url, true); 
request.onreadystatechange = go; 
request.send(null); 
} 

function go() { 
if (request.readyState == 4) { 
//if (request.status == 200) { 

var response = request.responseText; 

var list=document.getElementById("region"); 
      for (i = list.length - 1; i>=0; i--) { 
       list.remove(i); 
      } 
var records=response.split('|'); 
for (i=1; i<records.length; i++) { 
    //alert("rcord="+records[i]); 
    var record=records[i].split('*'); 
    var region=record[0]; 
    //alert("region="+region); 
    var regionid=record[1]; 
    //alert("regionid="+regionid); 
    var x=document.createElement('option'); 
    //var y=document.createTextNode(region); 
    x.text=region; 
    //x.value=region; 
    //alert(x.text); 
    //x.appendChild(y); 
    //list.appendChild(x); 
    list.options.add(x); 
    } 
    //} 
} 
} 

function initCs(path) { 

if (!request && typeof XMLHttpRequest != 'undefined') { 
request = new XMLHttpRequest(); 
} 
var country=document.getElementById('country'); 
    country.onchange=function() { 

     if(this.value!="Select") { 

      var list=document.getElementById("region"); 
      for (i = list.length - 1; i>=0; i--) { 
       list.remove(i); 
      } 
     //while (list.childNodes[0]) { 
     //list.removeChild(list.childNodes[0]); 
     //} 
     } 
     fillSelect(this.value,path); 
     //alert(this.value); 

    } 
//fillSelect(country.value); 
} 

이제 crlist.php라는 별도의 파일을 만듭니다. crlist.php에 대한

코드 :

<?php 
require_once 'yourconfigfile.php'; 

$cname = $_GET['country']; 

$query="select ID,Name from city where CountryCode=(select code from country where name='$cname') Order By Name ASC"; 
$res = mysql_query($query) or die(mysql_error()); 
while($region = mysql_fetch_array($res)){ 
    echo "<option value='".$region['Name']."'>".$region['Name']."</option>"; 
}  
?> 

지금 페이지를 갖는 드롭 다운에서 스크립트 다음을 추가합니다

<script type="text/javascript" src="crlist.js"> </script> 
<script> 
$(document).ready(function() { 

    initCs(""); 

}); 
</script> 

이 내 자신의 스크립트, 그리고 난 당신이 국가를 만든 것으로 가정했습니다 및 지역 표. 그러나 DB 구조에 따라 쿼리와 위 코드를 조정해야합니다. 내 대답에

참고 :이 도움이 Cascade Dropdown List using jQuery/PHP

희망.

Answer 3

당신이 JSON 형식으로 데이터를 인코딩하는 경우에, 당신은 다음과 같이 수행 할 수 있습니다 HTML에 대한

:

<select name='country' id='country'> 
    <option value='india'>India</option> 
    <option value='usa'>USA</option> 
</select> 
<select name='dates' id='dates'> 
</select> 

jQuery를 : 국가가 변경

data = { 
    india: ['2011-03-11','2010-02-01'], 
    usa: ['2006-03-11','2009-02-01'] 
} 

$('#country').change(function(){ 
    var dateopts = '' 
    $.each(data[$(this).val()],function(i,v){ 
     dateopts += "<option value='"+v+"'>"+v+"</option>" 
    }) 
    $('#dates').html(dateopts) 
}) 

두 번째 선택 상자의 옵션을 빌드하고 채 웁니다. http://jsfiddle.net/xHxcD/

---

위의 방법은 초기 페이지 요청과 클라이언트 측에 전송되는 모든 데이터가 필요합니다

여기에 작업 예제를 참조하십시오. 많은 양의 데이터가 있다면 AJAX를 통해 데이터를받는 것이 좋습니다. 클라이언트 측과 동일한 데이터 구조로 PHP에서 객체를 구현 한 다음 json_encode을 사용하여이를 JSON 문자열로 변환하고 반향시키는 것이 가장 간단 할 것입니다.

클라이언트 측에이를 읽는 것은 다음이 같이 간단 할 것이다 :

$.ajax('myJsonData.php?country=india',function(jsonData){ data.india = jsonData }) 

Answer 4

는 예를 PHP를 사용하지 않고 그것을 할 수 있습니다. 이를 위해 Javascript 배열에 두 개의 서로 다른 상태 목록을 지정하고 선택 항목을 기준으로 다른 선택 상자의 옵션을 변경하면됩니다. 저것과 같이 쉬운.

데이터베이스를 사용하여 상태를 저장하는 경우 페이지를로드하는 동안 서버 측 스크립팅 언어를 사용하여 자바 스크립트 배열을 할당 할 수 있습니다.

매우 적은 양의 데이터가 아니라면 그렇게하지 마십시오. 당신의 경우에는 2 개국 밖에 없으므로 계속 진행할 수 있습니다.