Js，根据先前的下拉选项选择输出选项下拉列表

Question

[SOLVED]
See Dynamic dropdownlist value from database if you have a simular issue, it worked for me.

Trying to output a dropdown list, which is populated depending on a previous dropdown.

The problem is,

How do you make the second dropdown list dynamic?

The values i need to add, in the second dropdown box comes from a database.
The results are stored in an php array ($rs).

Old php & html which used to do it, before i needed the options to change depending on previous selection.

<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 - Need to do what the old php is doing, aswell as sort by selection from first dropdown.

var Select_List_Data = {

're_id': {


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

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

}

};

And yes, ofc i have other js code that outputs it into the html form.

This code is however the issue.

Basicly,
if "1" is the value selected in the first dropdown, it will display option1-5 in the second dropdown.

The js code needs to be more dynamic, so values 1, 2, x+(there are more than 1 & 2 in the DB) aswell as all the second dropdown options text & values are inside some kind of js foreach.., simular to the php foreach if this is even possible.

Any help, advice or link to useful information on the subject is appreciated, i have been unable to find anything useful myself..

Answer 1

My suggestion: use AJAX

What you described is a classic problem in web-design. One of the most popular recommendations in this case is to use an XHR , or - in other words - perform an AJAX request . This is especially useful if you intend to make a new database query when the select value changes, and then populate an additional select with up-to-date data.

Compared to prepopulating all possible additional select fields, this approach will:

• significantly reduce bandwidth, especially if you have a large selection of selects ,
• enables received data to be as up-to-date as possible.

Just a quick outline of what I'm thinking about:

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();
});

You can find a concrete example at http://roshanbh.com.np/2007/12/change-dropdown-list-options-values-from-database-with-ajax-and-php.html

If you are not familiar with this approach, I strongly recommend reading up on AJAX and JSON, they are very powerful tools, and likely just what you need here.