1

dbからのphpスクリプトを使用してデータを入力し、別の動的コンボボックスの値をonselectionで変更するHTML動的コンボボックスを作成したいと思います。最初は2番目のコンボボックスを非表示にする必要があり、1番目のコンボボックスを選択すると、同様のデータに関連して2番目のコンボボックスが表示されます。たとえば、私はこのテーブルを持っています：

    Category Name
    Airport  ABC
    Airport  XYZ
    College  a1
    College  b1
    College  b2
    busstop  a
    busstop  b
    busstop  c
    busstop  d

したがって、1番目のコンボボックスには一意のカテゴリリスト（Airport、College、busStopなど）が含まれ、この選択に基づいて、ユーザーがAirportを選択した場合の2番目のコンボボックスには（ABC、XYZ）のみが含まれるなど、関連する値を持つ2番目のコンボボックスが有効になります。

基本的には、HTML、JAVASCRIPT、PHPのみでこれを実行したいと思います。

任意の提案をいただければ幸いです。

4

2 に答える 2

5

次のスニペットでは、データベースの行がオブジェクトとして配列されていると仮定しています。これに$resultsという名前を付けます。

編集：クエリオブジェクトを取得する方法： http ：//www.php.net/manual/en/mysqli-result.fetch-object.php

コンボボックスを作成するためのデータを収集することから始めます。

$combobox_data = array();

$results = mysqli_query("SELECT * FROM TABLE");
//create a multi dimensional array with names per category
while($row = mysqli_fetch_object($results)){
    $combobox_data[$row->Category][] = $row->Name;
}



$category_combobox_html = "";
$name_combo_boxes_html = "";
//create category combo_box
foreach($combobox_data as $category=>$names){

    //Add category option to  category combo-box
    $category_combobox_html .= '<option value="'.$category.'">'.$category.'</option>';

    //Create Names combo-box for this category
    $name_combo_boxes_html .= '<select id="'.$category.'" name="'.$category.'" class="hidden_combobox">';

    //loop names, to add Names in the combo-box for this category
    foreach($names as $name){
        $name_combo_boxes_html .= '<option value="'.$name.'">'.$name.'</option>';
    }
    //end your combo box for this category
    $name_combo_boxes_html .= '</select>';
}

あなたのCSS

<style type="text/css" media="screen">
    .hidden_combobox{
        display:none;
    }
</style>

あなたのhtml

<select name="categories" id="categories">
<?php echo $category_combobox_html; ?> 
</select>


<?php echo name_combo_boxes_html ;?>

あなたのJavaScript

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

    //when you select something from category box
    $("#categories").change(function(){

        //get selected category
        var selectedValue = $(this).find(":selected").val();

        //hide all nameboxes
        $('.namebox').each(function(){
           $(this).hide();
        });

        //show combobox for this select
        $('#'+selectedValue).show();
    });
</script>

結果は次のようになります。

combo_boxに一致するカテゴリを選択しない限り、すべての名前のコンボボックスは非表示になります

<select name="categories" id="categories">
    <option value="Airport">Airport</option>
    <option value="College">College</option>
    <option value="busstop">busstop</option>
</select>

<select id="Airport" name="Airport" class="namesbox hidden_combobox">
    <option value="ABC">ABC</option>
    <option value="XYZ">XYZ</option>
</select>
<select id="College" name="College" class="namesbox hidden_combobox">
    <option value="a1">a1</option>
    <option value="b1">b1</option>
    <option value="b2">b2</option>
</select>
<select id="busstop" name="busstop" class="namesbox hidden_combobox">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>
于 2012-07-12T13:04:59.400 に答える
-1

あなたはそれをグーグルで試しましたか？あなたはこのようなものを探しているようです。

于 2012-07-12T11:55:15.717 に答える