使用ajax或jquery填充下拉列表

时间:2014-08-05 08:04:25

标签: javascript php jquery

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

<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>

1 个答案:

答案 0 :(得分:1)

您需要在第一次下拉列表后使用JavaScript或提交按钮。

对于JavaScript,请执行以下操作:

  1. 在第一个下拉列表中绑定到Change事件
  2. 触发Ajax调用,传递第一个
  3. 的值
  4. 返回JSON,然后为第二个选择构建选项,或者返回HTML并将旧选择替换为新选择
  5. 另一种选择是将第一个下拉列表作为一个表单,将第二个下拉列表作为另一个表单,并将每个表单的提交按钮 - 看起来有点像您在示例中尝试的那样 - 但是您需要每个选择以不同的形式,然后您需要以与处理任何表单提交相同的方式构建第二个选择。

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

    (没有理由你不能同时做这两件事,如果你想为没有JS的人提供服务,但也为那些提供更顺畅的界面的人提供了