在单击“选择选项”时，使下拉菜单消失

Question

I have a couple form elements that when clicked update the database and disappear.

At first, I have a button that reads Check In . Upon clicking it, the database is updated and a dropdown is presented in place of the button. In the dropdown, there are locations for the user to choose, that have values of their corresponding location-number, which upon clicking update the database. The last option is labeled Check Out , and upon clicking it, the database is supposed to be updated one last time, and then red text saying Checked Out should appear.

Here's my code:

<button class="checkIn">Check In</button>

<form method='post' class='myForm' action=''>

<td>
<select name='locationSelect' class='locationSelect'>
    <option value='1'>Exam Room 1</option>
    <option value='2'>Exam Room 2</option>
    <option value='3'>Exam Room 3</option>
    <option value='4'>Exam Room 4</option>
    <option value='CheckOut'>Check Out</option>
</select>
</form>

and here is the jquery

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
$(document).ready(function() {    
    $('.locationSelect').hide();
    $('.finished').hide();
});

$('.checkIn').click(function(){
    $e = $(this);
    $.ajax({
    type: "POST",
    url: "changeloc.php",
    data: "checkIn="+$(this).val(),
    success: function(){
      $('.checkIn').css("display","none");
      $('.locationSelect').show();

    }
    });
});

$('.locationSelect').change(function(){
    $e = $(this);
    $.ajax({
       type: "POST",
       url: "changeloc.php",
       data: "locationSelect="+$(this).val(),
       success: function(){

       }
    });
});
$('.locationSelect option[value="CheckOut"]').click(function(){
    $e = $(this);
    $.ajax({
       type: "POST",
       url: "changeloc.php",
       data: "checkOut="+$(this).val(),
       success: function(){
       $('.locationSelect').css("display","none");
       $('.finished').show();
       alert('done');
       },
       error: function(request){
       alert(request.responseText);
       }
    });
});

</script>

The problem is that everything works until the user hits Check Out , and then red text doesn't appear and the dropdown doesn't disappear. What's the problem?

Thanks for any and all help!

Answer 1

Having the check out button in a drop down select list isn't right. These lists are for options , not for commands.

Why don't you have a checkout button that following the list, and is hidden

<button class="checkOut" style="display:none;" value="Check Out" />

This way, once your room list has been populated, you can simply set the check out button to visible again. This means the page logics flows (checkin - select - checkout).

For the red text, replace the dropdown with something like this?

$(".checkOut").click(function(e) {
  $(".locationSelect").html("<p style='color:red'>Checked out!</p>");
});

Just food for thought.

Alternatively, you could check for the selected option in the $('.locationSelect').change() handler.

$('.locationSelect').change(function(e) {
  if($(this).children(":selected").val() === "CheckOut") {
    // Perform checkout logic.
  }
  else {
    // Perform room select logic.
  }
});