2011-08-29 4 views
0

한 번에 페이지에 약 3 개의 드롭 상자가 있어야합니다.각 선택 드롭 상자 필터가있는 여러 동적 드롭 상자 선택 출력

첫 번째 드롭 상자를 선택하면 데이터베이스의 콘텐츠가 테이블보기에 표시됩니다. 그런 다음 두 번째 드롭 상자를 선택하면 테이블의 데이터를 필터링하고 테이블에 3 개의 상자를 표시해야합니다.

아약스에서 할 수 있다는 것을 알고 있으므로 PHP로 코딩하고 있습니다. 코드를했지만 첫 번째 상자가 제대로 작동하는 문제가 있지만 두 번째 상자를 선택하면 두 번째 상자와 함께 첫 번째 상자 매개 변수가 필요하므로 세 번째 선택 상자로 보내야합니다.

동적 드롭 다운 상자의 데이터베이스 가져 오기에서 간단한 코드를 제공하십시오. 사용자 의견 검토를 위해이 코드를 사용하려고합니다.

나는 데이터베이스에서 제공이 코드 http://www.w3schools.com/PHP/php_ajax_database.asp

그러나 나의 경우 모두에서 사용하고 선택한 값이 선택 상자를 필터링하고 또한 테이블을 표시해야합니다. 그런 다음 3 선택 상자를 선택하면 처음 두 선택된 상자에 따라 다릅니다.

내가 원하는 것을 설명 할 수있는 한 최대한 노력하고 있습니다. 나는 내가 방금 필요로했던 것을 분명히한다.

지원을 요청합니다. 코드는

<html> 
<head> 
<script type="text/javascript"> 
function showUserM(str) 
{ 
if (str=="") 
    { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 

xmlhttp.open("GET","getuser.php?q="+str,true); 
xmlhttp.send(); 
} 

function showUserI(str1,srt2) 
{ 
if (str=="") 
    { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 

xmlhttp.open("GET","getuser.php?q="+str1+"&i="+str2,true); 
xmlhttp.send(); 
} 
function showUserA(str1,str2,str3) 
{ 
if (str=="") 
    { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 

xmlhttp.open("GET","getuser.php?q="+str1+"&i="+str2+"&a="+str3,true); 
xmlhttp.send(); 
} 


</script> 
</head> 
<body> 
<?php 
$server = 'localhost'; 
$user = 'root'; 
$pass = ''; 
$dbase = 'pub_12wing'; 

$connect = mysql_connect($server, $user, $pass, $dbase); 

mysql_select_db("publisher",$connect); 

/* 어떤 실수가있을 필요가 무엇인지 마지막 선택 상자 에 대한 $의 sql_magz 선택 쿼리 등등에 의존해야 $의 sql_issue에 따라 데이터를 가져 오는에, 여기가 여기 변경 */

$sql_magz = "select Distinct magz_id from magz_comment where pub_id = '2'"; 
    $sql_issue = "select Distinct issue_id from magz_comment where pub_id = '2'"; 
    $sql_artical = "select Distinct artical_id from magz_comment where pub_id = '2'"; 
    $result_magz = mysql_query($sql_magz); 
    $result_issue = mysql_query($sql_issue); 
    $result_artical = mysql_query($sql_artical); 
    ?> 
    <form> 

<select name="mag_id" onChange="showUserM(document.getElementByID('mag_id').value)" id="mag_id"> 

<option value="" selected>Select a Magazine ID:</option> 
<?php 
while ($row =mysql_fetch_array($result_magz)){ 
echo "<option value=".$row['magz_id'].">{$row['magz_id']}</option>"; 
} 
?> 
</select> 



<select name="issue_id" onchange="showUserI(document.getElementByID('mag_id').value,document.getElementByID('issue_id').value)" id="issue_id"> 
<option value="" selected>Select a Issue ID:</option> 
<?php 
while ($row =mysql_fetch_array($result_issue)){ 
echo "<option value=".$row['issue_id'].">{$row['issue_id']}</option>"; 
} 
?> 
</select> 



<select name="artical_id" onchange="showUserA(document.getElementByID('mag_id').value,document.getElementByID('issue_id').value,document.getElementByID('artical_id').value)" id="artical_id"> 
<option value="" selected>Select a Artical ID:</option> 
<?php 
while ($row =mysql_fetch_array($result_artical)){ 
echo "<option value=".$row['artical_id'].">{$row['artical_id']}</option>"; 
} 
?> 
</select> 


</form> 
<br /> 
<div id="txtHint"><b>Magazine info will be listed here.</b></div> 
<?php //mysql_close();?> 
</body> 
</html> 

이 document.getElementByID ('mag_id'). 값을 변경해야하나요?

미리 감사드립니다.

+0

지금까지 가지고있는 코드는 무엇이며보고있는 오류는 무엇입니까? – Treffynnon

+3

http://w3schools.com의 코드는 사용하지 마십시오. http://w3fools.com을 참조하십시오. –

+0

내가 선택한 상자에 대한 테이블보기와 같이 동적 선택 상자 (다중)가 필요합니다. – miya

답변

0

첫 번째 콤보 상자의 값은 고정되어 있습니까? secund 세 번째 콤보는 dinamically 경우

<select id="mag_id" onchange='PopulatesSecundBox(this)'> 
<?php // prints database's data ?> 
</select> 

그런 다음, 당신이 할 수 있습니다 :

<select id="issue_id" onchange='PopulatesThirdBox(this)'> 
<!-- Yes, it's empty --> 
</select> 

<select id="artical_id"> 
<!-- Yes, it's empty too --> 
</select> 

는 그런 다음에 DB 데이터를 처리 만약 그렇다면 , 당신은 문서의 정상 생성 이벤트를 아약스와 함께 사용하고 DOM을 사용하여 옵션으로 마법을 만듭니다 ... 필요한 것이 있습니다.