Question

我有一个带有select标记的表单，我需要在单击H6标记所在的Submit按钮后为用户选择的多个选项打印data-course属性

<h5>Course Selection</h5>

<?php if ($data_submitted != null) : ?>
   <h6><?php  foreach ($_POST['job_applied'] as $selectedOption) echo $selectedOption."\n"; ?></h6>
<?php else : ?>
   <select name="job_applied" id="multi_limit" multiple="multiple" class="multiselect form-control">
       <option value="10" data-course="Infromation Technology Course Credit">Infromation Technology Course Credit(10)</option>
       <option value="20" data-course="Main Stream Technologies Credit" >Main Stream Technologies Credit(20)</option>
       <option value="30" data-course="Mechanical Engineering Course" >Mechanical Engineering Course Credit(30)</option>
       <option value="40" data-course="General Mechanics Course Credit" >General Mechanics Course Credit(40)</option>
       <option value="50" data-course="Engineering Pro" >Engineering Pro Credit(50)</option>
       <option value="60" data-course="Master Engineering" >Master Engineering Credit(60)</option>
   </select>
<?php endif; ?>

Answer 1

执行此操作的方法有多种，我个人将一个包含此信息的数组保留在服务器端，但是，我不会告诉您，我显示了一种获取他data-course入侵内容的方法。

这就是这种方法...

问题在于，当您发布表单时，仅发布name及其value/s。没有发布其他属性的选项。

您必须使用javascript拦截表单的提交，然后自己发布数据，以下示例假设您使用的是jQuery。

<script>
$(document).ready( function(){

  $('form').on('submit', function (e){
    e.preventDefault(); // Stop posting to the server
    var selectedOptions = $('select[name="job_applied"] option:selected'); // Get all the selected options

    // Loop through them
    $.each(selectedOptions, function(i,o){
      // and append a hidden input with a job_applied_meta[data-course][****] name attribute
      // NOTE: The **** above is the value from the selected option.
      $('form').append('<input type="hidden" name="job_applied_meta[data-course]['+$(this).attr('value')+']" value="'+$(this).attr('data-course')+'">')
    })

    // Now post the form
    $('form').submit();
  });

});
</script>

以上内容现在会将data-course属性提交给服务器，但它将包含在$_POST['job_applied_meta']中。

$_POST['job_applied_meta']['data-course']将是一个数组，如下所示：

array(
   '10' => 'Infromation Technology Course Credit',
   '40' => 'General Mechanics Course Credit'
);

然后您将像这样访问：

<?php 
    foreach ($_POST['job_applied'] as $selectedOption) {
       echo $_POST['job_applied_meta']['data-course'][ $selectedOption ]; 
    }
?>

Answer 2

您可以定义一个将数值链接到文本的数组。

<?php
$course_info = [
       10 => 'Infromation Technology Course Credit',
       20 => 'Main Stream Technologies Credit',
       30 => 'Mechanical Engineering Course Credit',
       40 => 'General Mechanics Course Credit',
       50 => 'Engineering Pro Credit',
       60 => 'Master Engineering Credit',
];
?>

然后，您可以在提交表单时从与提交的值匹配的数组中提取文本。我还展示了如何使用相同的数组来生成选择选项，这可能是有优势的，因为它可以防止在将相同数据存储在两个位置（更改一个位置而忘记更改另一个位置等）时遇到的各种问题。），但您不必为此做任何事情。

<h5>Course Selection</h5>

<?php if ($data_submitted != null) : ?>
    <h6>
    <?php foreach ($_POST['job_applied'] as $selectedOption) {
           // get the text that matches the numeric value that was submitted
           echo $course_info[$selectedOption]."\n";
       } ?>
   </h6>
<?php else : ?>
   <select name="job_applied" id="multi_limit" multiple="multiple" class="multiselect form-control">
       <?php foreach ($course_info as $id => $name) {
           echo "<option value='$id' data-course='$name'>$name($id)</option>";
       } ?>
   </select>
<?php endif; ?>

表单提交后回显选择选项数据属性值

2 个答案: