Показать все выбранные значения из нескольких раскрывающихся списков - PullRequest
Новая
       11

Показать все выбранные значения из нескольких раскрывающихся списков

7 голосов
/ 11 февраля 2012

Вот то, что у меня есть ... 

<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(), чтобы я мог напечатать все выбранные значения ... Я знаю, как можноЯ печатаю первое выбранное значение ...

Спасибо

Ответы [ 6 ]

6 голосов
/ 11 февраля 2012

как насчет этого? 

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

Удачи !!!

2 голосов
/ 11 февраля 2012

Вы можете сделать что-то вроде этого: 

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/

0 голосов
/ 05 апреля 2019

В Angular 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 для форматирования полученной строки так, как я хотел, чтобы она была разделена.

Я надеюсь, что этоможет помочь кому-то.

0 голосов
/ 24 сентября 2013

Это поможет вам.Это в чистом виде.нет 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>
0 голосов
/ 11 февраля 2012

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">
0 голосов
/ 11 февраля 2012

Я бы использовал jquery, поскольку это проще

JQuery: 

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