jQuery Listbox: Read, Add, Remove and Submit Select Options

Use jQuery to read, add, remove, reset and submit options in a dropdown/listbox. Native <select> elements work well for single or multiple selection.

Read Selected Value and Text Top ↑

const value =
    $( "#listbox" ).val();

const text =
    $( "#listbox option:selected" )
        .text();

React to change Top ↑

$( "#listbox" ).on(
    "change",
    function () {
        $( "#result" ).text(
            $( this ).val()
        );
    }
);

Reset a Listbox Top ↑

$( "#listbox" )
    .prop(
        "selectedIndex",
        0
    );

Disable or Enable Top ↑

$( "#listbox" )
    .prop( "disabled", true );

$( "#listbox" )
    .prop( "disabled", false );

Add an Option Top ↑

$( "<option>", {
    value: "new-value",
    text: "New option"
}).appendTo( "#listbox" );

Remove the Selected Option Top ↑

$( "#listbox option:selected" )
    .remove();

Remove All Options Top ↑

$( "#listbox" ).empty();

Multiple Selection Top ↑

<select id="listbox"
        name="items[]"
        multiple>
</select>

const selected =
    $( "#listbox" ).val() || [];

Select All Options Top ↑

$( "#listbox option" )
    .prop( "selected", true );

Submit Multiple Values Top ↑

With name="items[]", PHP receives an array of selected values. Validate every submitted value before using it in a query.

$items = $_POST['items'] ?? [];

if (!is_array($items)) {
    $items = [];
}

Database Options Top ↑

Populate options from MySQL/PDO exactly as in the database dropdown tutorial. See PDO records and MySQLi SELECT.

Download original listbox examples

Redirect based on listbox selection →

Original Source Examples Retained for Migration Reference Top ↑

These source-page examples are retained so no learner-purpose example is silently lost. Use the modern examples above as the recommended implementation.

Original example 1

var sel = $("#student").val();

Original example 2

var sel = $('#student option:selected').text()

Original example 3

<script>
   $(document).ready(function() {
$("#student").change(function(){ // change function of listbox
var sel = $("#student").val(); // reading listbox selection
$("#t1").attr('value',sel); // keeping in a text box
   });
});
</script>

Original example 4

$("#student1,#student2,#student3").change(function(){ 
......
});

Original example 5

$(".my_class").change(function(){	// change function of listbox
var var_value = $(this).val();              // reading listbox selection value
var var_id = sel + $(this).attr('id');      // reading id of selected  listbox
});

Original example 6

$("#student").prop('selectedIndex',0);

Original example 7

Student <select id=student>
<option value='Alex'>Alex</option>
<option value='Raju'>Raju</option>
<option value='Raman'>Raman</option>
</select> <br><br>
<input type=text name=t1 id=t1>

Original example 8

<select name=cat_id id=cat_id class='form-control'>
....
</select>

Original example 9

<select id=student class='form-control'>
..
</select>

Original example 10

<select id=student class='form-control' style='width:auto;'>
..
</select>

Original example 11

<select id=student class='form-control' style='width:100px'>
..
</select>

Original example 12

<select id=student class='form-control' style='width:75%'>
..
</select>

Original example 13

$sql='select * from student ';
echo "<select id=name name=name class='form-control'>";
foreach ($dbo->query($sql) as $row) {
echo "<option value=$row[id]>$row[name]</option>";
}
echo "</select>";

Original example 14

if($stmt = $connection->query("SELECT * from student")){

echo "<select id=name name=name class='form-control'>";
while ($row = $stmt->fetch_assoc()) {
echo "<option value=$row[id]>$row[name]</option>";
}
echo "</select>";
}else{
echo $connection->error;
}

Original example 15

$('#student1').attr('disabled', true);

Original example 16

$('#student1').prop('disabled',false);

Original example 17

$('#student1,#student2').prop('disabled',false);

Original example 18

$("#student").append("<option value=" + to_add +">"+to_add+"</option>");

Original example 19

<script>
   $(document).ready(function() {
     $("#b1").click(function(){
    var to_add = $("#t1").val();
$("#student").append("<option value=" + to_add +">"+to_add+"</option>");
$("#t1").val('');
   });
});
</script>
Add text and submit to enter as option<br><br>
Student <select id=student>
<option value='Alex'>Alex</option>
<option value='Raju'>Raju</option>
</select> <br><br>
<input type=text name=t1 id=t1>
<input type=button name=b1 id=b1 value=Add>

Original example 20

var to_remove = $("#student").val();

Original example 21

$("#student option[value= '"+ to_remove + "' ]").remove();

Original example 22

<script>
   $(document).ready(function() {
     $("#b1").click(function(){
    var to_remove = $("#student").val();
$("#student option[value= '"+ to_remove + "' ]").remove();
   });
});
</script>
Select One option to remove / add.<br><br>
Student <select id=student>
<option value='Alex'>Alex</option>
<option value='Raju'>Raju</option>
<option value='Rone'>Rone</option>
<option value='Peter'>Peter</option>
</select> 
<input type=button name=b1 id=b1 value=Remove>

Original example 23

<script>
   $(document).ready(function() {
 $("#b1").click(function(){
	$("#student").empty();
  });
});
</script>
Select One option to remove / add.<br><br>
Student <select id=student>
<option value='Alex'>Alex</option>
<option value='Raju'>Raju</option>
<option value='Rone'>Rone</option>
<option value='Peter'>Peter</option>

</select> 
<input type=button name=b1 id=b1 value='Remove All'>

Original example 24

$("#student").change(function(){
//var str = ($("#student").val() || []).join(', '); 
var str=new Array();
$("#student option:selected").each(function() {
    str.push($(this).val());
});

Original example 25

$("#display1").html(str.join(","));

Original example 26

$("#b2").click(function(){
$('#student option').prop('selected', true);
});

Original example 27

<script>
$(document).ready(function() {
$("#student").change(function(){
//var str = ($("#student").val() || []).join(', '); 
var str=new Array();
$("#student option:selected").each(function() {
  str.push($(this).val());
});

$("#display1").html(str.join(","));
});
////////
$("#b2").click(function(){
$('#student option').prop('selected', true);
});
///////
     });
</script>
Select Multiple options by pressing Ctrl key<br><br>
Selected options will be displayed. <br><br>
<form method=post action=listbox5ck.php>
 <select id=student size=4 multiple name=student[]>
<option value='Alex'>Alex</option>
<option value='Raju'>Raju</option>
<option value='Rone'>Rone</option>
<option value='Peter'>Peter</option>
<option value='Ramu'>Ramu</option>
<option value='John'>John</option>

</select><input type=button name=b2 id=b2 value='Select All'><br> 
<br><br><input type=submit name=b1 id=b1 value='Submit'>
<div id=display1></div>

Original example 28

<?Php
echo "Your selections are here <br><br>";
$str=$_POST['student'];
while (list ($key, $val) = each ($str)) { 
echo "$key -> $val <br>"; 
}
?>

Original example 29

if( is_array($student) ){
$sql_student='(';
while (list ($key, $val) = each ($student)) {
//echo "$val <br>";
if(strlen($val)>0){
$sql_student = $sql_student."'".$val."'".",";
}
}
$sql_student=substr($sql_student,0,(strLen($sql_student)-1));
$sql_student=$sql_student.")";
$sql_student= " AND my_student_table.student IN $sql_student ";
}
else{$sql_student='';}

Additional Original Learning Routes Top ↑

Continue Learning jQuery

jQuery Tutorial Home jQuery Basic Structure Functions Used with jQuery jQuery Events jQuery Effects jQuery UI jQuery Exercises

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

This article is written by plus2net.com team.

plus2net.com

	15-09-2020
This is an amazing tutorial! Thank you very much, it was very beneficial to me.