简体   繁体   中英

How to empty select box when “Please Select” option is chosen

I have a drop down menu and an empty select box below:

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

The above is in the addstudent.php page:

Now what happens is that I have a php code where depending on which assessment is chosen from drop down menu, it runs a query and it displays either a list of students in the select box if rows from the db are found, if no rows are found then it simply displays a message stating that no students were found within an assessment in the select box. The code for this is below which is in the addedstudents.php page and is accessed through 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;

The problem I have is that if the user selects the Please Select option, it still displays the message stating no assessments are found, this is because obviously there are no modules in this query so it thinks that as it has no rows display the message. But I don't want this to be dislayed if the Please Select option is selected, I just want the select box to just be empty.

Problem is that even though I tried to use jquery to do this, what happens is the select box goes empty but then comes back with the message milliseconds later.

My question is that if the Please Select option is chosen from drop down menu, what is best way to be able to display an empty select box?

Below is attempt of this through jquery:

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

Just add disabled to the markup for the "Please Select" box like so:

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

Not the best way, but it's with jquery...

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

youy have 2 options for this; either filter it on the UI level or on the server level or both.

1.) on the js/jquery level (i will just have to give you a description/pseudocode so that you will be the one interpreting this)

Filter out if the value of the selected is "" then dont proceed; Same with @vortextangent's answer only check if $('#sessionsDrop').val() != "" should you proceed

2.) on the server side level i'd assume that before you could query your db you have this $_POST['session'] or $_GET['session'] which contains the value of the dropdown

you just have to catch it if $_POST['session'] or $_GET['session'] will both be '' (empty space) and you should not continue with the db query

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM