How to take values from multiple options of select input field

Question

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.

This should happen when you only select not on form submission? — Wolverine
– Wolverine, Commented Dec 3, 2016 at 17:44

Wolverine · Accepted Answer · 2016-12-03 18:24:03Z

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

meda · Accepted Answer · 2016-12-03 18:02:52Z

0

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

edited Dec 3, 2016 at 18:02

answered Dec 3, 2016 at 17:44

meda

45.5k14 gold badges96 silver badges123 bronze badges

7 Comments

Wolverine Over a year ago

He mentioned not to print value. $_POST['item'] would only fetch values.

Wolverine Over a year ago

That's exactly what I thought about changing the value of the option tags to the text they have. But what if he asks not to change the value?

Muhammad Haris Over a year ago

Firstly, Thanks @AhmedDaou for your effort but Yes i have same question i don't want to change the values of option. so what i should do?

meda Over a year ago

@MuhammadHaris I expanded on my answer

Muhammad Haris Over a year ago

Because the item name may me long which may not be efficient to put it into value attribute of option.

|

Isaac Meneses · Accepted Answer · 2016-12-03 18:38:24Z

0

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/

edited Dec 3, 2016 at 18:38

answered Dec 3, 2016 at 18:01

Isaac Meneses

1631 gold badge1 silver badge12 bronze badges

6 Comments

Muhammad Haris Over a year ago

Thanks @Isaac Meneses for your replay, but what i do if i have to print those values into particular division.

Isaac Meneses Over a year ago

@MuhammadHaris Could you explain better what you need?

Isaac Meneses Over a year ago

Describe specifically what you need and I will help you. @MuhammadHaris

Muhammad Haris Over a year ago

I want to select multiple options from select field and print those options into particular div to print only.

Isaac Meneses Over a year ago

Okay, I'll try to do something here. Tell me if it's what you need. I will edit my comment just below

|

Collectives™ on Stack Overflow

How to take values from multiple options of select input field

3 Answers 3

Comments

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related