如何一键传递一个列表框值到另一个列表框

Question

I am building a online store application by using php and mysql. I made a list box which can be used to list out the main categories.. once we select the main categories, the sub categories should comes down. How can we accomplished this task without button press or page reload.

the code for list box

<select name="category" id="inputarealistproduct" onfocus="getsubcat();">
        <option> Select category</option>
    <?php 
        $query="select id, categories_name from categories where parent_id=0";
        $result=mysql_query($query);
        while(list($id, $name)=mysql_fetch_row($result)) 
        {
            echo "<option value=\"".$id."\">".$name."</option>";            
        }
    ?></select>

and the table design is

id categories_name parent_id categories_sort

plz help me

Thanks

Answer 1

Try this: Jquery + Ajax

 $('#inputarealistproduct').change(function () {
      var product =  $('#inputarealistproduct').val();
       $.ajax({
            url : 'url of your page where you ececute query',
            type : 'GET',
            data : {
                item : product
            },
            success : function (resp) {
                if (resp.status) {
                    // manipulate your response data here.
                } else {
                    show_message('error', resp.msg);
                }
            }
        });

    })

Answer 2

I suggest you implement the onchange event on the first listbox so that it populates the other listbox with the subcategories for this category:

<select name="category" id="inputarealistproduct" onfocus="getsubcat();" onchange="GetSubCategories()">
        <option> Select category</option>
    <?php 
        $query="select id, categories_name from categories where parent_id=0";
        $result=mysql_query($query);
        while(list($id, $name)=mysql_fetch_row($result)) 
        {
            echo "<option value=\"".$id."\">".$name."</option>";            
        }
    ?></select>
<div id="result"></result>

in js:

function GetSubCategories(){
   var categoryId = document.getElementById("inputarealistproduct").value;

   $.ajax({
            url : 'process.php',
            type : 'GET',
            data : "category=" + categoryId ,
            success : function (resp) {
                if (resp.status) {
                    $("#result").html(data);
                } 
            }
        });
}

in process.php:

<?php
$category = $_GET["category"];
// change the query so that the column names match your subcategory table
$query="select id, sub_categories_name from subcategories where category_id=". $category;
$result=mysql_query($query);
?>

<select name="subcategory" id="subcategory">
            <option>Select sub category</option>
        <?php while(list($id, $name)=mysql_fetch_row($result)) 
            {
                echo "<option value=\"".$id."\">".$name."</option>";            
            }
        ?>
</select>