显示多个下拉列表的所有选定值

Display all selected value of multiple drop down list

本文关键字：下拉列表 显示      更新时间：2023-09-26

以下是我所拥有的。。。

<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>

请让我知道我应该在printAll()中写什么，这样我就可以打印我选择的所有值。。。我知道如何打印第一个选定的值。。。

这个怎么样？？

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);
}

祝你好运！！！

您可以这样做：

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);
}

演示：http://jsfiddle.net/n3cXj/1/

我会使用jquery，因为它更容易

JQuery:

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

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">

这将对您有所帮助。它是纯js的。没有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>

在angular 4中，我没有使用angular多选下拉菜单，而是使用了普通下拉菜单。以下是代码。

HTML文件：

         <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文件：

        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);
        }

评论：

  • 使用event.currentTarget.selectedOptions[index].value可以获得多选下拉列表的多个选定值。在我的情况下，mergedValue为我提供了适当的多选值
  • 我使用了split和replace来格式化所获得的字符串，因为我希望它是公共分隔的

我希望这能帮助到别人。

相关文章：