PHP - 单击重置按钮时清除职位名称下拉列表中的值答案

【问题标题】：PHP - clear the value on job title drop down list when reset button clickedPHP - 单击重置按钮时清除职位名称下拉列表中的值
【发布时间】：2016-03-07 19:01:18
【问题描述】：

部门

dept_ID       dept_name
   1           Account

职位名称

job_title_ID       job_title_name      dept_ID
     1             Account Manager        1 
     2              Account Clerk         1

用户.php

<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js">   </script>
<script>
$(document).ready(function(){
    //---SELECT DEPARTMENT DROP DOWN LIST---
    $("#userdepartment").change(function(){
        var departmentID = $(this).val();

        $.ajax({
            type: 'POST',
            url: 'change.php',
            data: {departmentID: departmentID},
            success: function(html)
            {
                 $("#userjobtitle").html(html);
            }
        });
    });
});
</script>
</head>

<body>
<form name="adduser" method="post" action="user.php">
<table>
     <tr>
         <td>Department:</td>
         <td>
             <select name="userdepartment" id="userdepartment">
             <?php
             //---Db connection---

             $query = "SELECT *
                       FROM department
                       ORDER BY dept_name ASC";
             $result = mysql_query($query);

             print("<option value=\"\">select one</option><br>");
             while($row = mysql_fetch_array($result))
             {
                 print("<option value=\"" . $row['dept_ID'] . "\">" . $row['dept_name'] . "</option><br />");   
             }   
             ?>
             </select>
         </td> 
     </tr>

     <tr>
         <td>Job Title:</td>
         <td>
             <select name="userjobtitle" id="userjobtitle">
                  <option value="">select one</option>
             </select>
         </td>
     </tr>

    <tr>
         <td><input type="submit" name="submit" value="Add" /></td>
         <td><input type="reset" name="reset" value="Reset" /></td>
    </tr>
</table>
</form>
</body>
</html>

更改.php

<?php
//---DB connection---

$departmentID = $_POST['departmentID'];

$q = "SELECT j.job_title_ID, j.job_title_name 
      FROM job_title j, department d
      WHERE j.job_title_dept = d.dept_ID && d.dept_ID = $departmentID";
$r = mysqli_query($dbc, $q);

echo '<option value="">select one</option>';
while($row = mysqli_fetch_array($r, MYSQLI_ASSOC))
{
    echo '<option value="'.$row['job_title_ID'].'">'.$row['job_title_name'].'</option>';
} 
?>

从上面的代码中，当我从部门下拉列表中选择客户时，职位下拉列表将显示客户经理和客户文员。
我的问题是当我点击重置按钮时，我应该如何清除职位下拉列表中的值？这是因为当我单击重置按钮时，职位下拉列表不会清除该值。有人可以帮帮我吗？

【问题讨论】：

这不是 PHP 工作，除非您重新加载整个页面。您可能想在用户界面中删除它，这是使用 JS 完成的。如果你的架构不同，你可以在 PHP 中完成，比如有一个返回列表的 PHP 服务和一个查询它的 AJAX 请求

标签： php jquery html

【解决方案1】：

尝试清空选择：

$('input[type="reset"]').click(function(e){
  e.preventDefault();
$('#userjobtitle').empty().append('<option value="">select one</option>');
});

【讨论】：

【解决方案2】：

您可以像这样使用Javascript 来做到这一点：

HTML：

<input type="reset" name="reset" value="Reset" onclick="reset();" />

Javascript：

function reset(){
  $('#userjobtitle').prop('selectedIndex',0);
}

【讨论】：

【解决方案3】：

你应该在 onclick 事件上通过 jquery 清除它，还有任何下拉：

$('#userjobtitle').val('');

【讨论】：

【解决方案4】：

你可以使用onclick事件

<input type="reset" name="reset" value="Reset"
       onclick="document.getElementById('userjobtitle').value='';" />

【讨论】：