javascript - js，根据之前的下拉选项选择输出一个选项下拉列表

Question

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

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

问题是，

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

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

在我需要根据之前的选择更改选项之前，旧的 php 和 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']
    }

}

};

是的，ofc 我还有其他 js 代码，可以将其输出到 html 表单中。

然而，这段代码是问题所在。

基本上，
如果第一个下拉列表中选择的值是“1”，则第二个下拉列表中将显示选项1-5。

js代码需要更加动态，因此值1、2、x+(数据库中不止1和2)以及所有第二个下拉选项文本和值都在某种js foreach中。 ，如果可能的话，类似于 php foreach。

任何有关该主题的帮助、建议或有用信息的链接都值得赞赏，我自己找不到任何有用的东西..

Answer 1

我的建议:使用AJAX

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

与预填充所有可能的附加选择字段相比，此方法将:

• 显着减少带宽，尤其是在您有大量选择时，
• 使接收到的数据尽可能保持最新。

简单概述一下我的想法:

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，它们是非常强大的工具，很可能正是您所需要的。