Question

以下是我所拥有的......

<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()写什么，以便我可以打印我选择的所有值......我知道如何打印第一个选定的值......

谢谢

Answer 1

怎么样？

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

祝你好运!!!

Answer 2

您可以这样做：

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/

Answer 3

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

JQuery：

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

Answer 4

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

Answer 5

这会对你有所帮助。它是纯粹的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>

Answer 6

在角度4中，我使用普通的而不是角度多选下拉菜单。以下是代码。

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格式化所获得的字符串，因为我希望将其常见地分开。

我希望这可以帮助某人。

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

6 个答案: