如何从选择输入场的多个选项取值

Question

我的代码是：

<form method="post"> 
 
    <select name="item" multiple> 
 
     <option value="1">Lotus</option> 
 
     <option value="2">Sun Flower</option> 
 
     <option value="3">MNC</option> 
 
     <option value="4">DELL</option> 
 
     <option value="5">LENOVO</option> 
 
    </select> 
 
    <button type="submit" name="ss">SUBMIT</button> 
 
</form> 
 

 
<div class="mutiple"> 
 
</div>

我要选择多个项目“不想要采取价值”，从选项列表并打印成div，课程名称为multiple。

例如，如果我选择莲花和向日葵然后我想打印莲花和向日葵不仅是它的价值。

Answer 1

您需要括号添加到名称：

<select name="item[]" multiple> 

然后在服务器端item将是一个数组：

var_dump($_POST['item']); 

---

你可以把文本的价值您的选择：

<select name="item[]" multiple> 
     <option value="Lotus">Lotus</option> 
     <option value="Sun Flower">Sun Flower</option> 
     <option value="MNC">MNC</option> 
     <option value="DELL">DELL</option> 
     <option value="LENOVO">LENOVO</option> 
</select> 

---

如果你不想改变这些值，那么你应该使用一个数据库或者是一个数组将它们映射：

$pcs = [ 
     "1"=>"Lotus", 
     "2"=>"Sun Flower", 
     "3"=>"MNC", 
     "4"=>"DELL", 
     "5"=>"LENOVO" 
]; 

foreach($_POST['item'] as $key){ 
    echo $pcs[$key]; 
} 

Answer 2

这很容易：d

<script> 

     function getSelectValues(select) { 
     var result = []; 
     var options = select && select.options; 
     var opt; 

     for (var i=0, iLen=options.length; i<iLen; i++) { 
      opt = options[i]; 

      if (opt.selected) { 
      result.push(opt.value || opt.text); 
      } 
     } 

     var return_div = result; 
     document.getElementById("selections").innerHTML = return_div; 
     } 
    </script> 


    <select multiple> 
    <option value="1">Lotus 
    <option value="2">Sun Flower 
    <option value="3">MNC 
    <option value="4">DELL 
    <option value="5">LENOVO 
    </select> 
    <button onclick="var el = document.getElementsByTagName('select')[0]; getSelectValues(el);">Show selected values</button> 


    <div> 
    <h1 id="selections"></h1> 
    </div> 

看看这个例子：

https://jsfiddle.net/pm67kwkw/3/

Answer 3

如果你想用JavaScript做它，你可以参考下面的代码：

<form method="post"> 
    <select name="item[]" multiple> 
     <option value="1">Lotus</option> 
     <option value="2">Sun Flower</option> 
     <option value="3">MNC</option> 
     <option value="4">DELL</option> 
     <option value="5">LENOVO</option> 
    </select> 

    <button type="submit" name="ss">SUBMIT</button> 
</form> 

<div class="multiple"></div> 

<script> 
    $('select[name=item]').on('change', function() { 
     var ul = $('<ul>'); 
     $('.multiple').empty(); 

     $(this).find('option').each(function(index, element) { 
      if($(element).is(':selected')) { 
       ul.append('<li>' + $(element).text() + '</li>'); 
      } 
     }); 

     $('.multiple').html(ul); 
    }); 
</script> 

，或者如果你想用PHP做它，这里的代码是：

if(!empty($_POST)) { 
    $products = array(
     '1' => 'Lotus', 
     '2' => 'Sun Flower', 
     '3' => 'MNC', 
     '4' => 'DELL', 
     '5' => 'LENOVO' 
    ); 

    echo "<ul>"; 
    foreach($_POST['item'] as $item) { 
     echo "<li>{$products[$item]}</li>"; 
    } 
    echo "</ul>"; 
}