2012-05-28 4 views
1

나는 products라는 테이블이있는 데이터베이스를 가지고 있으며 테이블에 아티스트 및 각 제품에 대한 정보가있는 다른 행이 있습니다. 데이터베이스에서 데이터를 표시하는 방법을 배웠고 한 범주에서만 데이터를 표시하는 방법을 발견했습니다. 쉽게 들리 네요. 하지만이 모든 것을 사용자가 목록에서보고 싶은 범주를 선택할 수있는 드롭 다운 메뉴와 결합하고 싶습니다. 내가 어떻게 이걸 만들 수 있니? 나는 자바 스크립트를 사용해야한다고 생각하지만, 자바 스크립트를 전혀 사용하지 않는다는 것을 발견했다. 여기 드롭 다운 목록으로 한 범주의 데이터 표시

내가 내 데이터베이스에서 모든 데이터를 표시하는 코드입니다 :

<?php 
$con = mysql_connect("localhost","root","password"); 
mysql_query('SET NAMES UTF8'); 
if (!$con) 
{ 
    echo "problem with connection" .mysql_error(); 
} 
?> 
<?php 
mysql_select_db("myapp",$link); 
$result = mysql_query('SELECT * FROM products',$link); 
while($row = mysql_fetch_array($result)) 
{ 
    $myimage = '<img src="'.$row['image'].'" />'; 

    echo "<div id='appear'>" . $myimage . '<br />' . $row['title'] . "<br 
/>" . "<p style='color:red;' >" . "myprice " . $row['price'] . "€" . "</p>". 
'<a href="image.php?id='.$row['id'].'">' 
    . "details" . "<a>" . "</div>" ;          
} 
mysql_close($link); 

    ?> 

을 그리고 여기에 내가 하나 개의 카테고리에서 데이터를 표시하는 코드입니다 :

<?php 
mysql_select_db("myapp",$link); 
$result = mysql_query('SELECT * FROM products WHERE category="cd"',$link); 
while($row = mysql_fetch_array($result)) 
{ 
    $mycategory = $row['category']; 
    $myimage = '<img src="'.$row['image'].'" />'; 
    echo "<div id='appear'>" . $myimage . '<br />' . $row['title'] . "<br 
/>" . 
    "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a 
href="image.php?id='.$row['id'].'">' 
    . "details" . "<a>" . "</div>" ; 
} 
mysql_close($link); 

?> 

은 여기 내입니다 매우 간단한 html 드롭 다운 메뉴

<select name="singlelist" id="singlelist" size="1" > 
<option value="mycd" >CD</option> 
<option value="mydvd" >DVD</option> 
<option value="other" >other</option> 
</select> 

나는 두 개의 드롭 다운 목록을 갖고 싶다는 말을했지만, 사용자가 하위 카테고리를 선택할 위치는 어디일까요?하지만이 모든 작동 방식을 이해하면 제대로 작동 할 것입니다. 다른 누구도 전에 이것을 경험 했습니까?

추신 :이 작업은 매우 간단 jQuery를 사용할 수있는 경우는 학교

답변

1

제러드와 마찬가지로 PHP 페이지를 분리하고 div에 데이터를로드 할 수 있다고 말했습니다. javascript 함수를 사용하여 div에로드 할 PHP 페이지를 트리거하고 onselect() 또는 onchange()를 사용하여이 함수를 트리거 할 수도 있습니다.

이 예제 코드가 도움이되기를 바랍니다.

HTML : 먼저 범주 PHP 파일과 마지막 사업부 아이디 : 당신은 getList 기능 3 PARAMS을 통과해야

<script type="text/javascript"> 
    function getList(cat, url, containerid){ 
     var xhr=false; 
     if (window.XMLHttpRequest) { 
       xhr = new XMLHttpRequest(); 
      } 
      else { 
       if (window.ActiveXObject) { 
        try { 
         page_request = new ActiveXObject("Msxml2.XMLHTTP") 
        } 
        catch (e){ 
         try { 
          page_request = new ActiveXObject("Microsoft.XMLHTTP") 
         } 
         catch (e){ 
         } 
        } 
       } 
      } 

      if (xhr) { 
       var params = "?list="+cat 
       xhr.onreadystatechange = showContents; 
       xhr.open("GET", url+params, true); 
       xhr.send(null); 
      } 
      else { 
       alert("Sorry, but I couldn't create an XMLHttpRequest"); 
      } 

     function showContents(){ 
      if (xhr.readyState == 4) { 
       if (xhr.status == 200) { 
        var outMsg = xhr.responseText; 
       } 
       else { 
        var outMsg = "There was a problem with the request " + xhr.status; 
       } 

       document.getElementById(containerid).innerHTML=xhr.responseText; 
      } 

     } 
    } 

</script> 

    <select name="singlelist" id="singlelist" size="1" onchange="getList(this.options[this.selectedIndex].value, 'php_file.php', 'container')" > 
    <option value="cd" >CD</option> 
    <option value="dvd" >DVD</option> 
    <option value="other" >other</option> 
    </select> 
    <div id="container"> </div> 

.난이 도움이되기를 바랍니다

<?php 
    if(isset($_GET['list'])){ 
    mysql_select_db("myapp",$link); 
    $result = mysql_query('SELECT * FROM products WHERE category="'.$_GET['list'].'"',$link); 
    while($row = mysql_fetch_array($result)) 
    { 
     $mycategory = $row['category']; 
     $myimage = '<img src="'.$row['image'].'" />'; 
     echo "<div id='appear'>" . $myimage . '<br />' . $row['title'] . "<br 
    />" . 
     "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a 
    href="image.php?id='.$row['id'].'">' 
     . "details" . "<a>" . "</div>" ; 
    } 
    mysql_close($link); 
    } 
?> 

이 예

onchange="getList('category', 'php_file', 'div_id')" 

PHP와 같은

. 또한이 블로그를 방문하고 싶을 수도 있습니다 http://crisostomozaidem.blogspot.com/ PHP에 대한 유용한 팁이 있습니다.

1

에서 프로젝트에 대한이야 때문에이 mysql_로 * 기능을 사용합니다.

디스플레이 기능이있는 별도의 PHP 페이지가 있습니다. 그런 다음 선택한 범주에 따라 onselect() 또는 OnChange()를 수행하고 div에 PHP 페이지를로드합니다.

는 HTML :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

<select name="singlelist" id="singlelist" size="1" OnChange=$("#container").load("load.php?do=this.options[this.selectedIndex].value")> 
<option value="mycd" >CD</option> 
<option value="mydvd" >DVD</option> 
<option value="other" >other</option> 
</select> 

<div id=container></div> 

는 PHP :이주의하는 것이 중요합니다 물론

<?php 
mysql_select_db("myapp",$link); 
$result = mysql_query('SELECT * FROM products WHERE category="' . $_GET['do'] . '"',$link); 
while($row = mysql_fetch_array($result)) 
{ 
    $mycategory = $row['category']; 
    $myimage = '<img src="'.$row['image'].'" />'; 
    echo "<div id='appear'>" . $myimage . '<br />' . $row['title'] . "<br 
/>" . 
    "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a 
href="image.php?id='.$row['id'].'">' 
    . "details" . "<a>" . "</div>" ; 
} 
mysql_close($link); 

?> 

나는 모든 종류가 포함되지 않았다는 것을 여기

그것을 수행하는 방법의 예 주의 사항 및 코드는 SQL 주입에 매우 취약합니다. 쿼리를 입력하기 전에 모든 입력을 위생해야합니다.

나는 내 jquery에도 약간 녹슬지 만, 만약 내가 뭔가를 놓친다면 다른 누군가가 내 대답을 편집 할 수 있습니다.

+0

불행히도 html/javascript/php/mysql 만 사용할 수 있습니다 ... jquery로 예제를 보았는데 훨씬 더 쉬워졌습니다 ... 답변 해 주셔서 감사합니다. 조금 녹슨 것 같습니다. 코드, 여기 요점은 배우는 것입니다. :) – ElaGorilaki

+0

클래스의 제약 조건 내에서 작업하는 경우 최적화가 중요하지 않다고 가정합니다. 모든 데이터를로드하고 CSS로 선택된 div가 아닌 콘텐츠를 간단하게 숨길 수 있습니다. – Jared

관련 문제