Отображение одной категории данных с выпадающим списком

Question

У меня есть база данных с таблицей, называемой продуктом, и в таблицу у меня есть заголовок, художник и некоторые другие строки, содержащие информацию для каждого продукта. Я научился отображать данные из базы данных, а также нашел способ отображения данных только из одной категории. Это звучит просто. Но я хочу объединить все это с выпадающим меню, в котором пользователь может выбрать категорию, которую он хочет видеть из списка. Как я могу это сделать? Я думаю, что мне нужно использовать javascript, но некоторые примеры, которые я нашел, вообще не относятся к javascript.

Вот код, который я отобразить все данные из моей базы данных:

<?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> 

Я не упоминал, что хочу иметь 2 выпадающих списка, где пользователь будет выбирать подкатегорию, но я верю, что если я пойму, как все это будет работать, я смогу заставить ее работать. Проходил ли кто-нибудь еще раньше?

пс: Я использую mysql_ * функции, потому что она с для проекта в школе

Answer 1

Как и Джаред сказал, что вы можете разделить страницу php и загрузить данные в div. Вы можете вызвать загрузку php-страницы на div с помощью функции javascript, а также запустить эту функцию с помощью onselect() или onchange().

Надеюсь, этот пример кода поможет.

HTML:

<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> 

Вы должны пройти 3 Params на функции GetList: первую категорию затем файл PHP и, наконец, Div идентификатор.

как в этом примере

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

PHP:

<?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); 
    } 
?> 

Я надеюсь, что это помогает. Также вы можете посетить этот блог http://crisostomozaidem.blogspot.com/, здесь есть несколько полезных советов о php.

Answer 2

Если вам разрешено использовать JQuery эта задача очень проста.

У меня была бы отдельная страница php с функцией отображения. Затем в зависимости от выбранной категории выполните onselect() или OnChange() и загрузите php-страницу в div.

Вот пример того, как сделать это:

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:

Конечно, важно отметить, что я не включил какой-либо меры предосторожности и код, поскольку он чрезвычайно уязвим для SQL-инъекций. Вы должны быть уверены, что вы санируете любой ввод, прежде чем он будет помещен в запрос.

Я тоже немного ржавый на моем jquery, поэтому, если я пропустил что-то, надеюсь, кто-то другой сможет отредактировать мой ответ.