Using selection to set second selection

Question

I am trying to use the first selection box to set the second selection box, based on what the first value was. Currently, I am trying to just set the second selection box to the value '2' because I cannot even get it to change. I have tried this...

if($row["usesize"] == 1){
                        ?>
                        <table><tr><td><input type="hidden" name="on0" value="Size">
                            <td><select name="os0" onchange="$('#testid').val('2').change();">
                                <?php
                                if($conn){
                                    $query = "SELECT size, color, quantity FROM `".$item."` group by size";
                                    $result5 = $conn->query ($query);
                                    if($result5->num_rows > 0){
                                        while($row5 = $result5->fetch_assoc()){
                                            ?>
                                            <option value="<?php echo $row5["size"];?>"><?php echo $row5["size"];?>
                                            <?php
                                        }
                                    }
                                }else{
                                    echo "Error".mysqli_error($conn);
                                }
                                ?>
                            </select>
                            <?php
                        }
                        if($row["usecolors"] == 1){
                            ?>
                            </td></tr><tr><td><input type="hidden" name="on1" value="Color">
                            <td><select name="os1" id="testid">
                                <option value="1">Test 1
                                <option value="2">2
                                <option value="3">Test 3
                            </select>
                        </td></tr>
                        <?php
                        }

I have tried searching for other ways to do it, but they all seem to come back to this option.

<select name="os0" onchange="$('#testid').val('2').change();">

The jquery code will not work if it is called when the document is not ready yet. Enclose the js code in `$( document ).ready() { .. }` — Karlo Kokkak, Apr 04 '18 at 00:39
Reference: https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange — Karlo Kokkak, Apr 04 '18 at 00:42
The PHP is irrelevant to your question. Please post the rendered HTML and CSS and remove the PHP tag — j08691, Apr 04 '18 at 01:30

score 1 · Accepted Answer · answered Apr 04 '18 at 01:26

Here is a simplified example that sets the second select box to the same value as the first using the onchange event.

window.onload = function(){
  var selectOne = document.getElementById('selectOne');
  var selectTwo = document.getElementById('selectTwo');
  selectOne.onchange = function(e){
    selectTwo.value = e.target.value;
  }
}

<select id="selectOne">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select id="selectTwo">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Using selection to set second selection

1 Answers1