javascript - 使用 ajax 或 jquery 填充下拉选择

Question

我有两个下拉框，我想要做的是，当我从第一个下拉列表中选择时，第一个下拉列表的值将能够通过第二个下拉列表获取，因此它将成为第二个下拉列表查询的基础.

<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

您需要使用 JavaScript 或在第一个下拉菜单后有一个提交按钮。

对于 JavaScript，执行如下操作:

1. 绑定(bind)到第一个下拉菜单上的 Change 事件
2. 触发 Ajax 调用，传递第一个值
3. 返回 JSON，然后为第二个选择构建选项，或者返回 HTML 并用新选择替换旧选择

另一个选项是将第一个下拉菜单作为一个表单，第二个下拉菜单作为另一个表单，并为每个下拉菜单提供一个提交按钮 - 这看起来有点像您在示例中尝试做的事情 - 但您需要每个选择以不同的表单，然后您需要以与处理任何表单提交相同的方式构建第二个选择。

我认为 JS 选项对用户更友好，但请记住，它不适用于没有 JavaScript 的人，因此您需要考虑您的目标受众是谁。

(如果您想满足没有 JS 的人的需求，同时也为有 JS 的人提供更流畅的界面，那么您没有理由不能两者兼得)