Fill second dropdown based on value from the first

Question

I have kinda asked this question before, but I have a drop down list that is filled using PHP/MYSQL, Now I want to change the dynamic values in another drop down box based on what is select here. Im guessing I need to use AJAX or JavaScript to get the value of the first drop down box, then some how use that to the next drop down.

Here is my current dropdown

  <label for="order_quoteid">Quote</label>
    <select name="order_quoteid" id="myselect" class="myselect"  style="text-decoration: none; width: 258px; height: 26px;">
      <option value="0"<?php echo !$results['order']->order_quoteid ? " selected" : ""?>>(none)</option>
      <option value="0" > Stock </option>
    <?php foreach ( $results['quotes'] as $quote ) { ?>
      <option value="<?php echo $quote->quote_id ?>"
        <?php echo ( $quote->quote_id == $results['order']->order_quoteid ) ? " selected" : ""?>>
            <?php echo htmlspecialchars( ($quote->quote_code ).str_pad($quote->quote_id, 4, "0", STR_PAD_LEFT).' - '.$quote->quote_title )?>
      </option>
    <?php } ?>
  </select>

Once I get the id from this and get it back as a variable in php I could create a select statement and while loop to create the values for the second is this correct?

Can someone point in the direction of how to get the value from the first dropdown and get it into a second please.

Thanks in advance.

Ian

EDIT--------------------------

Am I Close? The alert show the right value, Its just trying to reload the page or

in the right way that I can use the value in the PHP

  <script> $(document).ready(function(){ $('#quoteselect').on( 'change', '.myselect', function() { var OrderQuoteVal = $(this).val(); alert(OrderQuoteVal); $.ajax({ type: "POST", // url: "saveStatus.php", data: { Orderquoteid : OrderQuoteVal }, success: function(data) { $('#quoteselect').reload('#quoteselect', function() {}); //$('#quoteselect').load('orders.php #quoteselect', function() {}); } }) }); }); </script> <li class="styled-select" id="quoteselect"> <?php $qqid = $_POST['Ordderquoteid']; ?> <label for="order_quoteid">Quote</label> <select name="order_quoteid" id="myselect" class="myselect" style="text-decoration: none; width: 258px; height: 26px;"> <option value="0"<?php echo !$results['order']->order_quoteid ? " selected" : ""?>>(none)</option> <option value="0" > Stock </option> <?php foreach ( $results['quotes'] as $quote ) { ?> <option value="<?php echo $quote->quote_id ?>" <?php echo ( $quote->quote_id == $results['order']->order_quoteid ) ? " selected" : ""?>> <?php echo htmlspecialchars( ($quote->quote_code ).str_pad($quote->quote_id, 4, "0", STR_PAD_LEFT).' - '.$quote->quote_title )?> </option> <?php } ?> </select> </li> 

Answer 1

In php, you can load your page showing only the first dropdown, and add a event so it submit the page, you then look if you have a $_post[var] set, if so, load the data for the second dropdown.

I know it's not the most efficient way to do it, but if you don't want to use AJAX it can help.