multi-select list

Question

I have multi-select listbox. I am calling a function in on-change event and i pass the value from the multiselect list. When i do so i get the 1st selected vale and not all the multi-selected value.

<select name="cat" multiple="multiple" class="main" onChange="javascript:get_list(this.value);">
    <option value="">--Select Category--</option>
    <?php
     ////////////////display category//////////////////
     $cat_details=mysql_query("SELECT category_id,category 
                                 FROM category_tb 
                             ORDER BY category");

     while($cat_data=@mysql_fetch_array($cat_details)){?>                        
        <option value="<?=$cat_data['category_id'];?>"<?
        if($_REQUEST['cat']==$cat_data['category_id']){?> selected="selected"<?php } ?>><?=$cat_data['category'];?></option>
    <? } ?>                        
</select>

How can I pass all the selected value from multi-select to ajax?

Answer 1

Change name="cat" to name="cat[]" . All the selected values will then be stored in an array.

Answer 2

You need to set the name of the select field to

cat[]

and then you will receive an cat array of values

Answer 3

try something like this

this.options[this.selectedIndex].value

just noticed it is a multiple select, need a bit more complex javascript for that

see this example http://www.mredkj.com/tutorials/tutorial004.html

Answer 4

You will have to iterate over all the options and check the "selected"-property to get all the selected values.

<!-- html -->
<select name="cat" multiple="multiple" class="main" onChange="javascript:get_list(this);">

// Javascript
function get_list(sel) {
    var i = sel.options.length,
        opt = null,
        selValues = [];

    for ( ; i--; ) {
        opt = sel.options[i];
        if (opt.selected) {
            selValues.push(opt.value);
        }
    }

    console.log(selValues);
}