我的建议：使用AJAX

Question

[已解决]
如果您遇到类似问题，请参阅Dynamic dropdownlist value from database，这对我有用。

尝试输出下拉列表，该列表根据之前的下拉列表填充。

问题是，

如何使第二个下拉列表动态化？

我需要添加的值，在第二个下拉框中来自数据库结果存储在php数组（$ rs）中。

旧的PHP＆amp;曾经做过的html，在我需要根据之前的选择改变选项之前。

<select name="re_id" id="re_id">
<?php foreach ($rs as $r) { ?>

<option value="<?php echo $r['r_id'] ?>">
<?php echo $r['name'] ?></option>

<?php } ?>
</select>

JS - 需要做旧的PHP正在做的事情，以及从第一个下拉列表中选择的排序。

var Select_List_Data = {

're_id': {


    1: {
        text: ['option1', 'option2', 'option3', 'option4', 'option5'],
        value: ['option1', 'option2', 'option3', 'option4', 'option5']
    },

    2: {
        text: ['option6'],
        value: ['option6']
    }

}

};

是的，我有其他的js代码将它输出到html表单。

然而，这段代码就是问题。

基本上，
如果＆＃34; 1＆＃34;是在第一个下拉列表中选择的值，它将在第二个下拉列表中显示option1-5。

js代码需要更加动态，因此值1,2，x +（数据库中存在多于1和2）以及所有第二个下拉选项文本＆amp;值是在某种类型的js foreach ..中，如果可能的话，与php foreach相似。

感谢任何有关该主题的有用信息的帮助，建议或链接，我自己找不到任何有用的东西..

Answer 1

我的建议：使用AJAX

您所描述的是网页设计中的经典问题。在这种情况下，最流行的建议之一是使用XHR，或者 - 换句话说 - 执行AJAX request。如果您打算在select值更改时创建新的数据库查询，然后使用最新数据填充其他select，则此功能特别有用。

与预填充所有可能的其他select字段相比，此方法将：

显着降低带宽，特别是如果您有大量selects，
使收到的数据尽可能保持最新状态。

快速概述一下我在想什么：

<强> HTML

<select id="first-select">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

<select id="second-select">
    <option selected disabled>Please choose first</option>
</select>

<强>的JavaScript

document.getElementById('first-select').addEventListener('change', function (e) {
    var xhr = new XMLHttpRequest();
    var elem = e.target || e.srcElement;

    // dropdowndata.php will echo whatever data it gets from a database query, possibly in JSON
    xhr.open('dropdowndata.php?value=' + elem.value, 'GET');
    xhr.onload = function () {
        // populate `select#second-select` using response from server (eg.: xhr.responseText)
        // ...
    }
    xhr.send();
});

您可以在http://roshanbh.com.np/2007/12/change-dropdown-list-options-values-from-database-with-ajax-and-php.html

找到具体示例

如果您不熟悉这种方法，我强烈建议您阅读AJAX和JSON，它们是非常强大的工具，可能就是您需要的。

Js，根据之前的下拉选项

1 个答案:

我的建议：使用AJAX