javascript - Changing select content according to another select value

View Original

I have select, I want user to choose one of its option .according to the selected option the other select show some options. the second select retrieve its value from db via query . the some value should be a selected value from the first select .can any body help?

<select name="select2">
            <option value="--">--------</option>
            <?php
                $stmt = "SELECT * FROM XXX where f=somevalue";      
                $data = sqlsrv_query ($conn, $stmt);
                if ($data == false){}
                elseif (sqlsrv_fetch_array($data) == 0){}
                else {$data = sqlsrv_query ($conn, $stmt);
                      while ( $row = sqlsrv_fetch_array( $data, SQLSRV_FETCH_ASSOC)){ ?>
            <option value="<?php echo $row["id"] ?>"><?php echo $row["name"]?></option>
            <?php }}?>
          </select>

Answer

Solution:

Once you got what to show on second select, create an array and pass it to this function

function addToSelect(optionsToAdd) {
                sNum = 0
                for(option of optionsToAdd) {
                    sNum += 1
                    indivOption = document.createElement("option")
                    indivOption.innerText = option
                    indivOption.setAttribute("value", sNum)
                    document.getElementsByClassName("select-class")[0].appendChild(indivOption)
                }
 }
addToSelect(["choice 1", "choice 2", "choice 3", "choice 4"])

<html>
    <head></head>
    <body>
        <select class="select-class">
        </select>
    </body>
</html>

Source