HTML Multiple Select Box

How to make a select all option in html multiple select box using jquery?

I store status (selected/unselected) of options in data-selected attribute on click event. Then use it to select/unselect all option of listbox.

$("select").on("click", function(){        if ($(this).find(":selected").text() == "Select All"){    if ($(this).attr("data-select") == "false")      $(this).attr("data-select", "true").find("option").prop("selected", true);    else      $(this).attr("data-select", "false").find("option").prop("selected", false);  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select multiple data-select="false">>  <option>Select All</option>  <option>value1</option>  <option>value2</option>  <option>value3</option>  <option>value4</option>  <option>value5</option>  <option>value6</option></select>

html Select multiple option with simple click without pressing CTRL button

I think you want somethings like this :

$('select[multiple]').multiselect()

<!DOCTYPE html><html><head><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head><body>
<select multiple="multiple">    <option value="cheese">Cheese</option>    <option value="tomatoes">Tomatoes</option>    <option value="mozarella">Mozzarella</option>    <option value="mushrooms">Mushrooms</option>    <option value="pepperoni">Pepperoni</option>    <option value="onions">Onions</option></select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script></body></html>

How to get multiple selected values of select box in php?

If you want PHP to treat $_GET['select2'] as an array of options just add square brackets to the name of the select element like this: <select name="select2[]" multiple …

Then you can acces the array in your PHP script

<?php
header("Content-Type: text/plain");

foreach ($_GET['select2'] as $selectedOption)
    echo $selectedOption."\n";

$_GET may be substituted by $_POST depending on the <form method="…" value.

how to expand html multiple select box when clicked

I hope CSS is enough to solve your problem. Try something like this.

select{height:20px}select:focus{height:auto}

    <select multiple>      <option value="volvo">Volvo</option>      <option value="saab">Saab</option>      <option value="mercedes">Mercedes</option>      <option value="audi">Audi</option>    </select>

Multiple select goes up after selection

I think there may be better way but you may try:

let selectTop;

window.onmousedown = function (e) {
    var el = e.target;
    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
        e.preventDefault();

        // toggle selection
        if (el.hasAttribute('selected')) el.removeAttribute('selected');
        else el.setAttribute('selected', '');

        selectTop = el.parentNode.scrollTop;
    }
}

document.querySelector('select').addEventListener('scroll', (e) => {
  if (selectTop) { e.target.scrollTop = selectTop };
  selectTop = 0;
});

<h4>From</h4>

<div>
    <select name="sites-list" size="7" multiple>
        <option value="site-1">SITE</option>
        <option value="site-2" selected>SITE</option>
        <option value="site-3">SITE</option>
        <option value="site-4">SITE</option>
        <option value="site-5">SITE</option>
        <option value="site-6" selected>SITE</option>
        <option value="site-7">SITE</option>
        <option value="site-8">SITE</option>
        <option value="site-9">SITE</option>
    </select>
</div>

Catch array of HTML multiple select with PHP

Try changing the names of the fields on the form to the indices at which you want the desired result:

<form method="post">
  <input type="text" name="vcgame[0]" id="vcgame_1" value="">
  <select name="vccoun[0][]" id="vccoun_5" multiple="multiple">
    <option value="1">West Indies</option>
    <option value="2" selected="selected">India</option>
    <option value="3" selected="selected">Australia</option>
  </select>

  <input type="text" name="vcgame[1]" id="vcgame_2" value="">
  <select name="vccoun[1][]" id="vccoun_9" multiple="multiple">
    <option value="4">Italy</option>
    <option value="5" selected="selected">Germany</option>
  </select>
</form>

Then $_POST output is:

Array
(
    [vcgame] => Array
        (
            [0] => cricket
            [1] => football
        )
    [vccoun] => Array
        (
            [0] => Array
                (
                    [0] => 2
                    [1] => 3
                )
            [1] => Array
                (
                    [0] => 5
                )
        )
)

Or even like this:

<input type="text" name="data[0][vcgame]" id="vcgame_1" value="">
<select name="data[0][vccoun][]" id="vccoun_5" multiple="multiple">
...
<input type="text" name="data[1][vcgame]" id="vcgame_2" value="">
<select name="data[1][vccoun][]" id="vccoun_9" multiple="multiple">

Array
(
    [data] => Array
        (
            [0] => Array
                (
                    [vcgame] => cricket
                    [vccoun] => Array
                        (
                            [0] => 2
                            [1] => 3
                        )
                )
            [1] => Array
                (
                    [vcgame] => football
                    [vccoun] => Array
                        (
                            [0] => 5
                        )
                )
        )
)