2016-12-03 92 views
2

我的代碼是:如何從選擇輸入場的多個選項取值

<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

例如,如果我選擇蓮花和向日葵然後我想打印蓮花和向日葵不僅是它的價值

+0

這應該當你只選擇不在表單提交時發生? – Perumal

回答

0

您需要括號添加到名稱:

<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]; 
} 
+0

他提到不打印價值。 '$ _POST ['item']'只能獲取值。 – Perumal

+0

好的我編輯@ Perumal93 – meda

+0

這正是我想到的將選項標籤的值更改爲他們所擁有的文本。但是如果他要求不改變價值呢? – Perumal

0

這很容易: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/

+0

感謝@Isaac Meneses爲您的重播,但如果我必須將這些值打印到特定的分區,我該怎麼辦。 –

+0

@MuhammadHaris你能更好地解釋一下你需要什麼嗎? –

+0

具體描述你需要什麼,我會幫你。 @MuhammadHaris –

1

如果你想用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>"; 
}