CODEWITHSUNDEEP
javascriptphpjqueryhtml
Muhammad Haris
Muhammad Haris

Reputation: 310

How to take values from multiple options of select input field

My code is:

<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>

I want to select multiple items "not wants to take value" from option list and print into div having class named multiple.

For example, if I select Lotus and Sun Flower then I want to print Lotus and Sun Flower not only its value.

Upvotes: 2

Views: 2364

Answers (3)

Isaac Meneses
Isaac Meneses

Reputation: 163

It's easy :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>

Look this example:

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

Upvotes: 0

Wolverine
Wolverine

Reputation: 1702

If you want to make it with JavaScript, you can refer to the following code:

<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>

or if you want to make it with PHP, here the code is:

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

Upvotes: 1

meda
meda

Reputation: 45490

You need to add brackets to the name:

<select name="item[]" multiple>

then on the server side item will be an array:

var_dump($_POST['item']);

You can put the text as the value of your select:

<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>

If you don't want to change the values, then you should map them using a DB or perhaps an array:

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

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

Upvotes: 0

Related Questions