我有一个看起来像这样的应用程序：
) 患者 X 的姓名旁边是一个标记为 Check In 的按钮。这是在服务器端记录的。
2) 单击 Check In 按钮后，用户会看到一个下拉菜单（替换初始按钮），其中包含用户可以选择的多个位置。从选择中选择位置后，服务器端将再次更新。
3）然后用户可能决定选择多个位置，重复步骤 2
4) 最后，当用户选择完位置后，他在用户在步骤 2 和 3 中单击位置的同一个选择中单击 Check Out 按钮，标题为 Check Out。单击此按钮后，它将被发送到 checkloc.php 并记录。
5) 最后，下拉菜单消失，出现 Checked Out 字样。
现在，问题是页面上有很多患者（患者 A、患者 B、C、D 等）。页面上有一名患者，该过程就像上面的步骤一样工作。
不幸的是，当您在页面上有多个患者时，如果您（例如）单击患者 A 旁边的签入按钮，则会出现两个下拉列表，一个用于患者 A（应该如此），一个用于患者 B，即使没有人点击过姓名旁边的“签入”按钮。
这是我的代码：
html:
<button class="checkIn" data-param="button_1">Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param='location_1'>
<option value="0">Select a location</option>
<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>
</select>
</form>
<button class="checkOut" data-param="cbutton_1">Check Out</button>
<div class='finished' style='color:#ff0000;'>Checked Out</div>
<!--START SECOND SET-->
<button class="checkIn" data-param="button_2">Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param='location_2'>
<option value="0">Select a location</option>
<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>
</select>
</form>
<button class="checkOut" data-param="cbutton_2">Check Out</button>
<div class='finished' style='color:#ff0000;'>Checked Out</div>
和 javascript/jquery
<script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide(); // Hide all Selects on screen
$('.finished').hide(); // Hide all checked Out divs on screen
$('.checkOut').hide();
$('.checkIn').click(function() {
var $e = $(this);
var data = $e.data("param").split('_')[1] ;
// gets the id of button (1 for the first button)
// You can map this to the corresponding button in database...
$.ajax({
type: "POST",
url: "checkin.php",
// Data used to set the values in Database
data: { "checkIn" : $(this).val(), "buttonId" : data},
success: function() {
// Hide the current Button clicked
$e.hide();
// Get the immediate form for the button
// find the select inside it and show...
$('.locationSelect').show();
$('.checkOut').show();
}
});
});
$('.locationSelect').change(function() {
$e = $(this);
var data = $e.data("param").split('_')[1] ;
// gets the id of select (1 for the first select)
// You can map this to the corresponding select in database...
$.ajax({
type: "POST",
url: "changeloc.php",
data: { "locationSelect" : $(this).val(), "selectid" : data},
success: function() {
// Do something here
}
});
});
$('.checkOut').click(function() {
var $e = $(this);
var data = $e.data("param").split('_')[1] ;
// gets the id of button (1 for the first button)
// You can map this to the corresponding button in database...
$.ajax({
type: "POST",
url: "checkout.php",
// Data used to set the values in Database
data: { "checkOut" : $(this).val(), "buttonId" : data},
success: function() {
// Hide the current Button clicked
$e.hide();
$('.locationSelect').hide();
// Get the immediate form for the button
// find the select inside it and show...
$('.finished').show();
}
});
});
});
</script>
感谢您提供的所有帮助，如果您需要更多详细信息或说明，请询问！