CODEWITHSUNDEEP
javascripthtmldrop-down-menu
user1203613
user1203613

Reputation:

Display all selected value of multiple drop down list

Below is what I have...

<html>
<body>
<form name="myForm">
<select name="myOption" multiple>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<BR><BR>
<input type=submit value="Print First" onClick="printMe()">

<input type=submit value="Print All" onClick="printAll()">

</body>
<script>
function printMe() {
alert ("Selected option is " + myForm.myOption.value);
}

function printAll() {

var str = "";

// what should I write here??

alert("Options selected are " + str);
}


</script>
</html>

Please let me know what should I write in printAll() so that I can print all the values that I selected... I know how can I print the first selected value...

Upvotes: 7

Views: 40340

Answers (6)

rhea machado
rhea machado

Reputation: 1

In angular 4, instead of using angular multi-select dropdown I used the normal one. Following is the code.

HTML file:

         <select [ngModel]="DataValue" (change)="selectChangeHandler($event)" 
        id="multiple-select" name="multiple-select"  class ="form-control" multiple>
                 <option *ngFor="let ref of Data" [value]="ref['title']">
                            {{ref['title']}}
                 </option>
         </select>

Ts file:

        selectChangeHandler (event: any) {
           let oldvalue;
           let mergedValue = "";
           for ( let index = 0 ; index < event.currentTarget.selectedOptions.length; index++)
            {
              oldvalue = event.currentTarget.selectedOptions[index].value.replace(/["']/g, "");
              oldvalue = oldvalue.split(': ')[1];
              if (index ==`enter code here`= 0) 
                    { mergedValue += oldvalue; } 
              else 
                    { mergedValue += ", " + oldvalue; }
             }
    console.log(mergedValue);
        }

Comments:

  • Using event.currentTarget.selectedOptions[index].value you can get multiple selected values of multi-select dropdown. In my case, mergedValue gives me proper multiple selected values.
  • I have used split and replace to format the string obtained as I wanted it common separated.

I hope this can help someone.

Upvotes: 0

Bitopan Das
Bitopan Das

Reputation: 1

This will help you. It's in pure js. no jquery, mootools...

<!DOCTYPE html>
<html>
<body>
<script>
function get(){
 var str="",i;

for (i=0;i<asa.cars.options.length;i++) {
    if (asa.cars.options[i].selected) {
        str += asa.cars.options[i].value + ",";
    }
}
if (str.charAt(str.length - 1) == ',') {
  str = str.substr(0, str.length - 1);
}
alert("Options selected are " + str);
}
</script>
<form name="asa">
<select name="cars" id="combo" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="button" onclick="get()">
</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

</body>
</html>

Upvotes: 0

mgraph
mgraph

Reputation: 15338

http://jsfiddle.net/XBDmU/2/

var selected = [];
$("#Mymutiple option").each(function(){
    $(this).click(function(evt){
    myvar = $(this).val();
    if (evt.ctrlKey){
        if(jQuery.inArray(myvar, selected) >-1){
            selected = jQuery.grep(selected , function(value) {
              return value != myvar;
            });
         }
         else{
            selected.push(myvar);
            }
    }
    else{
        selected = [];
        selected.push(myvar);    
       }
    });
})
$("#printMe").click(function(){
    alert("First selected is:" + selected[0]);
    return false;
    });
$("#printAll").click(function(){
alert("Options selected are :" + selected);
return false;
});

html:

<form name="myForm">
<select name="myOption" id="Mymutiple" multiple>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<BR><BR>
<input type="submit" value="Print First" id="printMe">

<input type="submit" value="Print All" id="printAll">

Upvotes: 0

Fahim Parkar
Fahim Parkar

Reputation: 31637

how about this??

function printAll() {

var str="",i;

for (i=0;i<myForm.myOption.options.length;i++) {
    if (myForm.myOption.options[i].selected) {
        str = str + i + " ";
    }
}

alert("Options selected are " + str);
}

Good Luck!!!

Upvotes: 6

dfsq
dfsq

Reputation: 193261

You can do something like this:

function printAll() {

    var obj = myForm.myOption,
        options = obj.options, 
        selected = [], i, str;

    for (i = 0; i < options.length; i++) {
        options[i].selected && selected.push(obj[i].value);
    }

    str = selected.join();

    // what should I write here??
    alert("Options selected are " + str);
}

Demo: http://jsfiddle.net/n3cXj/1/

Upvotes: 2

Cakestep
Cakestep

Reputation: 111

I would use jquery as it's easier

JQuery: 

$("myOption:selected").each(function () {
 alert($(this).text());
});

Upvotes: 0

Related Questions