从PHP中的“选择多个”形式的所有选项（选中和未选中）中获取值

Question

我的“选择多种形式”需要帮助。

单击提交按钮时，我要提交选项的所有值。 选定和未选定的选项。

因此，如果您以下面的代码为例。 我想将所有选项值放入数组，而无需在Input中选择它们。

<form action="/action_page.php">
    <select name="cars" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
</form>

结果：

array( [0] => 'volvo', [1] => 'saab', [2] => 'opel', [3] => 'audi' );

这篇文章做了我想要的一切，但是都是用Java语言完成的： 从“选择”框中获取所有选项（选中和未选中） 。 因此，如果可以通过使用Javascript和PHP来做到这一点，那将是不错的选择，但我尚未找到解决方案。

感谢您对Advance的帮助！

顺祝商祺

Answer 1

您可以使用javascript创建其他文本输入来存储所有选项值：

 var my_values = []; var $select = $('select[name=the_select]'); $select.find('option').each(function() { my_values.push($(this).val()); }); $new_input = $('<input type="text" name="all_options">'); // use 'type="hidden"' in production $new_input.val(my_values.join(',')); $select.parent().append($new_input); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="the_select"> <option value="val0">value 0</option> <option value="val1">value 1</option> <option value="val2">value 2</option> </select> 

该表单将发送名为“ all_options”的附加参数。

此PHP代码将创建数组：

$all_options = explode(",", $_GET['all_options']);

Answer 2

您可以在表单中添加hidden输入，其中包含所有可用选项：

<form action="/action_page.php">
    <select name="cars" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <input type="hidden" name="allCars">
    <input id="submit" type="submit">
</form>

现在您可以执行以下操作：

<script type="text/javascript">
  document.getElementById('submit').addEventListener('click', () => {
     // All available options from cars select.
    const options = document.getElementsByName('cars')[0].options;
    // Array with all available cars.
    const allCars = [];
    for (let i = 0; i < options.length; i++) {
      allCars.push(options[i].value);
    }
    // Assign cars to hidden input.
    document.getElementsByName('allCars')[0].value = allCars;
  });
</script>

如果这不是最终答案-希望您能了解这种方法的主要思想。

Answer 3

$ .map可能是使用jquery执行此操作的最有效方法。

 var options = $('#selectData option'); var values = $.map(options ,function(option) { return option.value; }); console.log(values) //=> all values 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="selectData" id="selectData"> <option value="val0">value 0</option> <option value="val1">value 1</option> <option value="val2">value 2</option> </select> 

Answer 4

你是这个意思吗

您可以通过这种方式构造数据。

但是在提交时，您应该使用ajax发布或创建新表单，而不是使用旧的表单提交。

 $('#form').submit(function(event){ var arr=[]; $('option').each(function(){ arr.push({ selected: $(this).is(':selected'), value: $(this).val() }) }) console.log(arr); // do ajax form post and redirect // or build a new form with data strcture above return false; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form" action="/action_page.php"> <select name="cars" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <input type="submit"> </form>