Question

我的应用程序看起来像这样：

）患者X旁边的名字是一个标记为“检入”的按钮。这是在服务器端记录的。

2）点击“检入”按钮后，系统会向用户显示用户可以选择的多个位置的下拉列表（替换初始按钮）。从select中选择一个位置后，服务器端将再次更新。

3）然后用户可能决定选择多个位置，重复步骤2

4）最后，当用户完成选择位置时，他点击用户在步骤2和3中单击位置的同一选择中的“结账”按钮，标题为“结账”。单击此按钮后，会将其发送到checkloc.php并记录。

5）最后，下拉列表消失，并显示“已检出”字样。

现在，问题在于页面上有许多患者（患者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>

感谢您提供的任何帮助，如果您需要更多详细信息或说明，请询问！

Answer 1

问题是您的选择器$('.locationSelect')获取该类的所有元素。你需要一种方法将其缩小到正确的范围。

最简单的方法是稍微更改你的html，将每组控件包装在自己的div或其他容器中（可能是ul中的li元素）：

<div class="container">
    <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>
</div>

然后你可以这样做：

        // Hide the current Button clicked
        $e.hide();
        // get the current button's containing div
        var $container = $e.closest("div.container");
        // Get the immediate form for the button
        // find the select inside it and show...
        $container.find('.locationSelect').show();
        $container.find('.checkOut').show();

...在结帐点击处理程序中也是一样。

请注意，如果每组控件都已在其自己的容器中，则不需要添加新的div容器，例如，如果您已将它们放在单个<li>元素或表格单元格中，那么您可以使用$container = $e.closest("li") ...

区分多组表格

1 个答案: