如何從選擇輸入場的多個選項取值

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>"; 
}