Question

我一直在试图动态地从数据库创建页面上的元素并将它们推送到表元素上。我知道我可以通过jquery做到这一点，但我不确定我是否需要事先建立这些数据并相应地隐藏/显示数据。

首先我有我的第一个下拉菜单，我从使用php从数据库中获取的数据中填充;

<div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Select Item
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <?php
                    while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
                    {
                        echo '<li><a href="#" id ="showlogs"><b>ItemId:</b> ' . $row['id'] . '</a></li>'; 
                    }
            ?>
    </ul>
</div>

我有一个javascript onclick事件，它会更新当前所选内容的下拉列表;

<script>
    $('#showlogs').click(function(){
        $('#dropdownmenu').text($(this).text());
    });
</script>

我要做的下一步是根据从下拉菜单中选择的内容，使用基于下拉菜单内容的php填充数据库查询的结果填充空白表（默认未选中），例如SELECT * FROM logs WHERE id =（当前选中的ItemId）

默认表格;

<div class="panel panel-default">
    <table class="table">
        <tr>
            <th style="text-align:center">Date</th>
            <th style="text-align:center">View</th>
        </tr>
        <tr>
            <td style="text-align:center">None Selected</td>
            <td></td>
        </tr>
    </table>
</div>

任何建议都会很棒:)谢谢

Answer 1

与Blag一样，使用带有事件监听器的select标签来触发您的AJAX请求。

<select id="optionList">
   <option>...</option>
</select>

然后

$("#optionList").on("change", function(){
    //do something
});

完全使用AJAX：

$("#optionList").on("change", function(){
    $.ajax({
        url: "outsideScript.php",
        method: 'POST',
        data: {
            itemSelected : $("#optionList").val()
        },
        success: function(result){
            $("#myDiv").html(result);
        }
    });
});

离。jsfiddle

Answer 2

这不是你应该怎么做的。

Bootstrap dropdown用于制作菜单，其中包含硬链接<a href=""></a>到其他页面。
如果您想创建一个AJAX页面，该页面将从用户选择中加载某些内容，then use a SELECT

使用数据库中的数据动态创建下拉元素和文本

2 个答案: