Display all selected value of multiple drop down list
Question
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...
6 answers
solution1
6 ACCPTED 2012-02-11 11:02:06
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!!!
solution2
2 2012-02-11 10:56:22
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);
}
solution3
0 2013-09-24 06:32:37
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>
solution4
0 2019-04-05 16:56:37
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].valueyou can get multiple selected values of multi-select dropdown. In my case,mergedValuegives 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.
solution5
0 2012-02-11 10:55:03
I would use jquery as it's easier
JQuery:
$("myOption:selected").each(function () {
alert($(this).text());
});
solution6
0 2012-02-11 11:00:42
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Read selected value of all the drop down list
How do I display the selected value of the drop down list on gsp
How to display the list from database using selected value in drop down
Display the selected value of a Drop down list in a text field (javascript)
For a particular selected value from a drop-down box, Display its corresponding values in drop down list?
Display the selected of a Drop down list (javascript or jquery)
display selected value of the drop down in jsp page
when one option selected in one drop down list then how to display its related value in another drop down list using javascript
Compare and set the selected value in drop down list?
set selected value of a drop down list
Related Tags