选择“请选择”选项时如何清空选择框

Question

下面有一个下拉菜单和一个空的选择框：

<select name="session" id="sessionsDrop">
    <option value="">Please Select</option>
    <option value='20'>EWYGC - 10-01-2013 - 09:00</option>
    <option value='22'>WDFRK - 11-01-2013 - 10:05</option>
</select> </p> 

$studentSELECT = "";  
$studentSELECT .= '<select name="studenttextarea" id="studentselect" size="6">';
$studentSELECT .= '</select>'; 

以上在addstudent.php页面：

现在发生的情况是我有一个 php 代码，根据从下拉菜单中选择的评估，它会运行一个查询，如果找到数据库中的行，它会在选择框中显示一个学生列表，如果没有找到任何行，然后它只显示一条消息，说明在选择框中的评估中没有找到学生。代码如下，位于addedstudents.php 页面中，可通过ajax 访问。

$studentnum = $currentstudentstmt->num_rows();   
$studentSELECT = "";     

if($studentnum == 0){
    $studentSELECT .= "<option disabled='disabled' class='red' value=''>No Students currently in this Assessment</option>"; 
} else {   
    while ( $currentstudentstmt->fetch() ) {
       $studentSELECT .= sprintf("<option disabled='disabled' value='%s'>%s - %s %s</option>", $dbStudentId, $dbStudentAlias, $dbStudentForename, $dbStudentSurname) . PHP_EOL; 
    }
}

echo $studentSELECT;

我遇到的问题是，如果用户选择了Please Select 选项，它仍然会显示消息指出没有找到评估，这是因为显然此查询中没有模块，所以它认为它没有行显示消息。但是，如果选择了Please Select 选项，我不希望显示它，我只想让选择框为空。

问题是，即使我尝试使用 jquery 来执行此操作，但会发生选择框变空但几毫秒后返回消息的情况。

我的问题是，如果从下拉菜单中选择了 Please Select 选项，那么显示空选择框的最佳方法是什么？

以下是通过 jquery 进行的尝试：

$('#sessionsDrop').change( function(){
    if( $(this).val() == '' ){
        $('#studentselect').val('');                   
    }
});

Answer 1

只需将disabled 添加到“请选择”框的标记中，如下所示：

<select name="session" id="sessionsDrop">
    <option disabled value="">Please Select</option>
    <option value='20'>EWYGC - 10-01-2013 - 09:00</option>
    <option value='22'>WDFRK - 11-01-2013 - 10:05</option>
</select> </p> 

Answer 2

你有两种选择；在 UI 级别或服务器级别或两者上过滤它。

1.) 在 js/jquery 级别上（我只需要给你一个描述/伪代码，这样你就可以解释这个）

如果选择的值为""，则过滤掉，然后不要继续； 与@vortextangent 的答案相同，仅检查$('#sessionsDrop').val() != "" 是否应该继续

2.) 在服务器端级别，我假设在您可以查询数据库之前，您已经拥有了这个 $_POST['session'] 或 $_GET['session'] 包含下拉列表的值

如果$_POST['session'] 或$_GET['session'] 都将是''（空白），你只需要抓住它，你不应该继续数据库查询

Answer 3

不是最好的方法，但它是用 jquery...

.ajax({
    success: function () {
        //your current code here 
        if ($('#sessionsDrop').val() == "") {
            $('#studentselect').children().remove();
        }
});