如何從列表框中選擇多個值

Question

我有下面的代碼，如果我選擇一個值，它可以正常工作，但是現在我需要這樣，當我從列表框中選擇多個值時，我必須獲取所選值的值。 我該怎么辦？ 這是代碼，

HTML代碼：

<select id="attributeNames" name="attributeNames" size="5" multiple="multiple"         
onchange="getUniqueValues(value)">
<option value="Apple"> Apple </option>
<option value="Mango"> Mango </option>
<option value="Orange"> Orange </option>
<option value="Banana"> Banana </option>                                            
</select>

JavaScript的：

function getUniqueValues(value){
alert(value);
}

例如：如果我選擇了Apple，那么我會得到警告說蘋果，現在，如果我選擇了apple＆mango，則必須獲得具有apple＆mango值的警報。 這里面臨的問題。

這是代碼： http : //jsfiddle.net/5VtE3/2/

提前致謝，

Answer 1

這是有關如何執行此操作的示例-

HTML-

<select id="attributeNames" name="attributeNames" size="5" multiple="multiple">
    <option value="Apple"> Apple </option>
    <option value="Mango"> Mango </option>
    <option value="Orange"> Orange </option>
    <option value="Banana"> Banana </option>                                            
</select>

JS-

window.onload = function () {
    var listbox = document.getElementById('attributeNames');
    listbox.onchange = function () {
        for(var index = 0; index < this.children.length; index++) {        
            if (this.children[index].selected) {
                console.log(this.children[index].value);
            }            
        }
    }​;
};

現場演示 。

Answer 2

如果您不介意使用jquery，-

function getUniqueValues(){  
    var k=0;  
    var selected_list = {};  
    $('#attributeNames option').is(':selected').each(function(){  
        selected_list[k++] = $(this).val();  
        });  
    alert(selected_list);  
    }  

要么

function getrUniqueValues(){  
    $('#attributeNames option').is(':selected').each(function(){  
        alert($(this).val());  
        });  
    }  

Answer 3

您可能要嘗試復選框

<input type="checkbox" name="fruit" value="apple">Apple<br/>
<input type="checkbox" name="fruit" value="banana">Banana

或者您應該嘗試制作：

<select id="attributeNames" name="attributeNames" size="5" multiple="multiple" onChange="getUniqueValues()" >
  <option value="Apple"> Apple </option>
  <option value="Mango"> Mango </option>
  <option value="Orange"> Orange </option>                                           
</select>

function getUniqueValues(){
var values = this;
}

Answer 4

嘗試這個：

<select id="attributeNames" onchange="getUniqueValues.call(this)" name="attributeNames" size="5" multiple="multiple">
    <option value="Apple"> Apple </option>
    <option value="Mango"> Mango </option>
    <option value="Orange"> Orange </option>
    <option value="Banana"> Banana </option>                                
</select>

function getUniqueValues(){
    for(var i = 0; i < this.options.length; i++){
        if(this.options[i].selected)
            alert(this.options[i].value);
    }
}

jsfiddle： http : //jsfiddle.net/5VtE3/7/

Answer 5

 function getValue(id) { var retval = ""; var lstdatabase = document.getElementById(id); for (var i = 0; i < lstdatabase.options.length; i++) { if (lstdatabase.options[i].selected) { if (retval == "") { retval = lstdatabase.options[i].value; } else { retval = retval + ',' + lstdatabase.options[i].value; } } } return retval; }