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

Question

我有几个表单元素，当单击它们时会更新数据库并消失。

首先，我有一个显示Check In的按钮。 单击数据库后，将更新数据库，并显示一个下拉列表来代替按钮。 在下拉列表中，有用户可以选择的位置，这些位置具有其对应的位置编号的值，单击后即会更新数据库。 最后一个选项标记为Check Out ，单击它时，该数据库应该是最后一次更新，然后出现红色文本，表示Checked Out 。

这是我的代码：

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

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

问题在于，一切正常，直到用户单击Check Out ，然后红色文本不会出现并且下拉菜单也不会消失。 有什么问题？

感谢您提供的所有帮助！

Answer 1

在下拉选择列表中使用“ 签出”按钮是不正确的。 这些列表用于选项 ，而不用于命令。

为什么您没有在清单后面的结帐按钮被隐藏

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

这样，一旦您的房间列表被填充，您就可以简单地将“退房”按钮设置为再次可见 。 这意味着页面逻辑流（签入-选择-签出）。

对于红色文字，将下拉列表替换为类似的内容？

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

值得深思。

或者，您可以在$('.locationSelect').change()处理程序中检查选定的选项。

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