1

製品のカテゴリを一覧表示する選択ボックスが必要です。カテゴリが選択されたときに、そのカテゴリの製品をデータベースから同時に選択したい。このアプリケーションで AJAX を使用する必要がありますか? これを行う例はありますか？ここに私が取り組んでいるコードがあります:

これらの関数は、各選択フィールドのオプションを構築します。

function buildCategoryOptions($catId = 0)
{
$sql = "SELECT cat_id, cat_parent_id, cat_name
        FROM tbl_category
        ORDER BY cat_id";
$result = dbQuery($sql) or die('Cannot get Product. ' . mysql_error());

$categories = array();
while($row = dbFetchArray($result)) {
    list($id, $parentId, $name) = $row;

    if ($parentId == 0) {
        // we create a new array for each top level categories
        $categories[$id] = array('name' => $name, 'children' => array());
    } else {
        // the child categories are put int the parent category's array
        $categories[$parentId]['children'][] = array('id' => $id, 'name' =>   
$name); 
    }
}   

// build combo box options
$list = '';
foreach ($categories as $key => $value) {
    $name     = $value['name'];
    $children = $value['children'];

    $list .= "<option value=\"$key\"";
    if ($key == $catId) {
        $list.= " selected";
    }

    $list .= ">$name</option>\r\n";

    foreach ($children as $child) {
        $list .= "<option value=\"{$child['id']}\"";
        if ($child['id'] == $catId) {
            $list.= " selected";
        }

        $list .= ">&nbsp;&nbsp;{$child['name']}</option>\r\n";
    }
}

return $list;
}

/* ラジオ オプションの製品オプション リストを作成します */

function buildProductOptions($catId = 0)
{
$sql = "SELECT pd_id, pd_name, cat_id
    FROM tbl_product
    WHERE cat_id = $catId 
    ORDER BY pd_name";
$result = dbQuery($sql) or die('Cannot get Product. ' . mysql_error());
$numProduct = dbNumRows($result);

$products = array();
while($row = dbFetchArray($result)) {
    list($id, $name) = $row;
        // we create a new array for each top level categories
        $products[$id] = array('name' => $name);
}   

// build combo box options
$list = '';
foreach ($products as $key => $value) {
    $name     = $value['name'];

    $list .= "<option value=\"$key\"";

    $list .= ">$name</option>\r\n";

}

return $list;

}

これは選択フィールドのページです:

$catId = (isset($_GET['catId']) && $_GET['catId'] > 0) ? $_GET['catId'] : 0;

$categoryList = buildCategoryOptions($catId);
$productList = buildProductOptions($catId);

<!--- Category Select --->
<select name="cboCategory" id="cboCategory" class="box">
   <option value="" selected>-- Choose Category --</option>
<?php
        echo $categoryList;
 ?>  
</select>

<!--- Products Select : category is changed the products need to be from selected cat -    
 -->

<select name="selectOptions" id="selectOptions" class="box" multiple="multiple" >
   <option>--Pick the other options--</option>
<?php
    echo $productList;
 ?> 
</select>
4

1 に答える 1

3

はい、ここで ajax を使用する必要があります。以下のコードと注意事項を確認してください。

ActiveXObject()ajax 呼び出しを行う aを返す関数を次のように記述します。

function getXMLHTTP() {
    var xmlhttp = false;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlhttp = new XMLHttpRequest();
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e1) {
                    xmlhttp = false;
                }
            }
        }
    }

    return xmlhttp;
}

次に、目的のデータを取得するサイト固有の関数を次のように記述します。

function getProducts(){
var select1 = document.getElementById("cboCategory");
var strURL = "getproducts.php?city="+select1.options[select1.selectedIndex].value;

var req = getXMLHTTP(); // function to get xmlhttp object
if (req) {
    req.onreadystatechange = function() {
        if (req.readyState == 4) { // data is retrieved from server
            if (req.status == 200) { // which reprents ok status
                document.getElementById('productsdiv').innerHTML = req.responseText; // div to be updated
            } else {
                alert("[GET Products]There was a problem while using XMLHTTP:\n" + req.statusText);
            }
        }
    };
    req.open("GET", strURL, true); // open url using get method
    req.send(null);
}

}

この関数はcboCategory選択オプションの変更イベントで呼び出されるため、対応する html は次のようになります。

<select onchange="getProducts()" id="cboCategory" class="box">
  ...
</select>
<!-- Can be anywhere on same page -->
<div id="productdiv"> </div>

getproduct.php ページはproducstdiv、html ページのタグの内容を上書きする文字列として html を返します。

php からデータをとして返すこともできます。詳細については、タグ wiki を確認してください。また、を使用して ajax 呼び出しを行うこともできます。

于 2012-09-18T18:18:55.677 に答える