繁体   English   中英

如何使用javascript附加和编辑选择标签?

How to append and edit Select Tag with javascript?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有这种桌子

menu_id    menu_name     parent_id
1          Rapat 2018    0
2          Rapat RT      1
3          Rapat 2019    0
4          Rapat RW      1
5          Rapat RT 02   2    
6          17 Agustus    5

我想根据父母选择表格。

如果第一个选择框选择“ Rapat 2018”,则第二个选择框出现,并带有Rapat 2018的子项选项。

在此处输入图片说明

在此处输入图片说明

但是问题是,当我在第一个选择框中更改选择其他选项时,第二个选择框中的选项没有更改,但是出现了新的选择框。

当第一个选择框更改时,如何更改第二个选择框? 如果我从第二个选择框中选择选项,则会出现第三个选择框。

这就是我所做的

menu_drop_down.php

<?php
include 'conf.php';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

    $sql = "SELECT MainMenu.menu_id, MainMenu.menu_name AS Menu, MainMenu.parent_id AS ParentId, COUNT(ChildMenu.menu_id) as Child, MainMenu.link
    FROM menu AS MainMenu
    LEFT JOIN menu AS ChildMenu ON ChildMenu.parent_id = MainMenu.menu_id
    WHERE MainMenu.parent_id=0
    GROUP BY MainMenu.menu_id, MainMenu.menu_name
    ORDER BY MainMenu.menu_name DESC ";

    $q = $pdo->query($sql);
    $q->setFetchMode(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Could not connect to the database $dbname :" . $e->getMessage());
}


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MultiDropdown</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <select name="category" class="form-control category" id="1">
                    <option value="">Select</option>
                    <?php
                    while ($r = $q->fetch()){
                        echo '<option value="'.$r['menu_id'].'">'.$r['Menu'].'</option>';
                    }
                    // foreach($data as $d){
                    //  echo '<option value="'.$d['id'].'">'.$d['post_title'].'</option>';
                    // }
                    ?>
                </select>
            </div>
        </div>
        <div id="dropdown_container"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
        $(document).on('change','.category',function(){
            var id = $(this).val();
            var Sid = $(this).attr('id');
            var tes = ++Sid;
            console.log(tes);
            $.ajax({
                url:'getmenu.php',
                type:'post',
                data:{'id':id, 'tes' : tes},
                success:function(data){
                    //alert(data);
                    $('#dropdown_container').append(data);
                }
            })
        });
    });
</script>
</body>
</html>

getmenu.php

<?php
include 'conf.php';


try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);


} catch (PDOException $e) {
    die("Could not connect to the database $dbname :" . $e->getMessage());
}
if(isset($_POST['id'])){
    $id= $_POST['id'];
    $tes= $_POST['tes'];
    $sql = "SELECT MainMenu.menu_id, MainMenu.menu_name AS Menu, MainMenu.parent_id AS ParentId, COUNT(ChildMenu.menu_id) as Child, MainMenu.link
                FROM menu AS MainMenu
                LEFT JOIN menu AS ChildMenu ON ChildMenu.parent_id = MainMenu.menu_id
                WHERE MainMenu.parent_id=".$id."
                GROUP BY MainMenu.menu_id, MainMenu.menu_name
                ORDER BY MainMenu.menu_name DESC";

    $q = $pdo->query($sql);
    $q->setFetchMode(PDO::FETCH_ASSOC);

    if(!empty($q)){
        echo '<div class="row">
        <div class="col-md-4">
        <select name="category" class="form-control category" id="'.$tes.'">
        <option value="">Select</option>';
        while ($r = $q->fetch()){
            echo '<option value="'.$r['menu_id'].'">'.$r['Menu'].'</option>';
        }
        echo '</select>
        </div>
        </div>';
    }
}
?>

任何帮助,将不胜感激 !

问题暂未有回复.您可以查看右边的相关问题.
2 使用JavaScript将图片附加到HTML区域标签

我正在尝试将点击事件添加到地图上的html区域。 如果单击该区域,则图像应仅显示在该区域中。 例如: 使用Javascript: 如果单击该区域,则将显示警报消息,但图像不会显示。 但这似乎已加载,因为我可以在区域标记内的代码中找到图像。 有人可以帮忙吗? 谢谢! ...

3 使用javascript / jquery [duplicate]将“
 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM