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' );

这篇文章可以满足我的所有要求，但可以使用Javascript Get all options from Select box (selected and non selected)完成。因此，如果可以通过使用Javascript和PHP来做到这一点，那将是不错的选择，但我尚未找到解决方案。

感谢您对Advance的帮助！

真诚地，Ledung。

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>

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

4 个答案: