使用ajax或jquery填充下拉列表

Question

I have two dropdown boxes and what I want to do is when I select from the 1st dropdown the value of the 1st dropdown will be able to get by the 2nd dropdown so it will be the basis of the 2nd dropdown to its query.

<tr>
    <td><div class="captionbold">OR Book Type</div></td>
    <td colspan="3"><div align="left">
        <span class="custom-dropdown custom-dropdown--white custom-dropdown--small">
        <select class="custom-dropdown__select custom-dropdown__select--white"  name="txtorbooktype" style="width:220px;">
         <option>-</option>
         <option value='0' <?php if($txtorbooktype=='0'){echo 'selected';} ?>>
            Real Property Tax Administration System</option>
         <option value='1' <?php if($txtorbooktype=='1'){echo 'selected';} ?>>
            Business Permit and Licensing</option>
         <option value='2' <?php if($txtorbooktype=='2'){echo 'selected';} ?>>
            Others Transaction</option>
        </select>
        </span>
    </div></td>
 </tr>
 <tr>
    <td><div class="captionbold">OR Book</div></td>
    <td><div align="left">
        <span class="custom-dropdown custom-dropdown--white custom-dropdown--small">
        <select class="custom-dropdown__select custom-dropdown__select--white"  name="txtorbookfromto" style="width:200px;">
        <?php 
            $sql = "SELECT orbookcode, concat(orbookfrom,' - ',orbookto) as orbookfromto FROM rorbookinfo where orbooktype = '".$_POST['txtorbooktype']."'  and status = '0'";
            include_once rootpathphp.'/lib/config.php';
            $con = mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_DATABASE);
            if (!$con)
            {
              die('Could not connect: ' . mysqli_error($con));
            }

            mysqli_select_db($con,"ajax_demo");
            $result = mysqli_query($con,$sql);                
            while($row = mysqli_fetch_array($result))
            {
                $default = '';          
                if($row['orbookcode']==$txtorbookfromto) 
                {
                    $default = 'selected';
                }
                echo $default;
                echo " <option ".$default." value='".$row['orbookcode']."'>".$row['orbookfromto']."</option>";
            }
            mysqli_close($con);
            ?>
        </select>
        </span>
    </div></td>
  </tr>

Answer 1

You'll need to either use JavaScript or have a submit button after the first dropdown.

For JavaScript do something like this:

1. bind to a Change event on the first dropdown
2. Trigger an Ajax call, passing the value of the first
3. Either return JSON and then build the Options for the second select, or return HTML and replace the old select with the new one

The other option is to have the first dropdown as one form, and the second in another form and a submit button for each - that looks kind of like what you're trying to do in your example - but you need each select in a different form and then you need to build the second select in the same way you'd handle any form submission.

I think the JS option is more user-friendly, but bear in mind it won't work for people without JavaScript so you'll need to think about who your target audience is.

(There's no reason you can't do both, if you want to cater for people without JS but also offer a smoother interface for those with)