带有 2 个值的选项菜单

Question

我在表单中有以下选项菜单，可将字段插入表格：

<option value="">select staff</option>
    <?php
    do {  
    ?>
<option value="<?php echo $row_Staff['Staff_Name']."||".$row_Staff['Email']?>">
<?php echo $row_Staff['Staff_Name']?></option>
                    <?php
    } while ($row_Staff = mysql_fetch_assoc($Staff));
      $rows = mysql_num_rows($Staff);
      if($rows > 0) {
          mysql_data_seek($Categories, 0);
          $row_Staff = mysql_fetch_assoc($Staff);
      }
    ?>
                  </select>

在How to post two values in an option field? 中解释的技术选项值中，我有来自源表的 2 个字段：Staff_Name 和 Email。

我正在尝试使用以下方法将表单中的两个字段插入到表中：

<input type="hidden" name="Staff_Name" class="form-control" id="Staff_Name" value=<?php 
$staff =$_POST['Staff_Data'];  
$staff_name = explode("||", $staff);
echo $staff_Name[0];  
?> />

和

<input type="hidden" name="Email" class="form-control" id="Email" value=<?php 
    $staff =$_POST['Staff_Data'];  
    $email = explode("||", $staff);
    echo $email[1];  
    ?> />

不幸的是，我可以看到由“||”分隔的 2 个字段如果我插入选项菜单值但似乎无法将 Staff_Name 或电子邮件插入单个字段，则在表中。插入时，两个字段都是空白的。任何帮助将不胜感激。

Answer 1

而不是在下拉值中组合 staffname 和 staffemail。请在下拉列表值中的人员名称和下拉列表属性中的人员电子邮件，并在下拉列表的 onchange 中将这些值设置在隐藏输入中，以便您在表单提交时轻松获取这些值。 请浏览下面的代码，如果您有任何疑问，请告诉我。

//下拉菜单

<select id="ddStaff">
    <option value="">select staff</option>
    <?php
        do {  ?>
            <option value="<?php echo $row_Staff['Staff_Name']; ?>" staff-email = "<?php echo $row_Staff['Email'];?>">
                <?php echo $row_Staff['Staff_Name']?>
            </option> <?php
        } while ($row_Staff = mysql_fetch_assoc($Staff));

        $rows = mysql_num_rows($Staff);

        if($rows > 0) {
            mysql_data_seek($Categories, 0);
            $row_Staff = mysql_fetch_assoc($Staff);
        }
    ?>
</select>

//输入隐藏字段存储员工姓名和员工邮箱

<input type="hidden" id="txtStaffName" name="txtStaffName">
<input type="hidden" id="txtStaffEmail" name="txtStaffEmail">

//Jquery 代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#ddStaff").on('change',function(){
            var staffName = $(this).val();
            var staffEmail = $('option:selected', this).attr('staff-email');
            $("#txtStaffName").val(staffName);
            $("#txtStaffEmail").val(staffEmail);
        });
    });
</script>

请在https://jsfiddle.net/z4a0fywp/查看 出于测试目的，我没有将输入隐藏在小提琴中。