如何使用在JavaScript

多選陣列數據我有一個多選擇框，我要訪問在JavaScript中選擇的數據。下面是代碼：如何使用在JavaScript

<form onsubmit="return false;" id="multisel"> 
    <select name="a[]" id="a" multiple style="width:350px;" tabindex="4"> 
    <option value="Pedro">1</option> 
    <option value="Alexis">2</option> 
    <option value="Messi">3</option> 
    <option value="Villa">4</option> 
    <option value="Andres">5</option> 
    <option value="Sergio">6</option> 
    <option value="Xavi">7</option> 
    </select> 

    <button id="btn1" onclick="ajaxmultiselect()" type="submit" class="btn btn-primary">Save changes</button> 

    <p id="status"></p> 
</form>

這是到目前爲止，我已經試過代碼：

<script>  
function ajaxmultiselect(){ 
    var input = []; 
    input = document.getElementById("a").value; 
    var status = _("status"); 
    if(input == ""){ 
    status.innerHTML = "Fill out all of the form data"; 
    }else { 
    status.innerHTML = input; 
    } 
} 
</script>

當我運行的代碼只給人的第一價值。我試圖訪問在PHP中的值，它工作正常，它將值作爲數組在php中傳遞。爲什麼它不與JavaScript一樣？

我也試圖運行值的長度的循環，但其計算僅第一選擇的長度。我想顯示所有將被選中的值。

任何幫助將不勝感激。

來源

2013-05-08 Priyanshu

訪問該值的更好的方法是'document.forms [0] .a.value'。 'document.forms [0]'是第一種形式，'form.a'是該形式中ID爲'a'的元素。 – 2013-05-08 19:34:41

document.getElementById('a').options //All Options

這會給你的，你可以遍歷選項數組。

來源

2013-05-08 19:38:22

這不會在Firefox上壽工作，也許它並不在IE工作，要麼，看看這個網頁，看看Mozilla已經沒有實現它：https://developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement – Goodwine 2013-05-08 19:53:27

採取的一點。編輯。 – 2013-05-08 20:15:18

對於給定的<select>元件，所有的所選擇的選項是在selectedOptions屬性。 selectedIndex屬性具有第一個選定選項的索引，如果沒有選擇，則屬性爲-1。每個選項都是該元素的DOM對象，因此它們的值位於value屬性中。所以：

function ajaxmultiselect(){ 
    var input = []; 
    var select = document.forms[0].a; 
    var status = _("status"); 
    var options = select.selectedOptions; 
    if(select.selectedIndex == -1){ 
    // no selection 
    status.innerHTML = "Fill out all of the form data"; 
    }else { 
    for (var i = 0; i < options.length) 
     input.push(options[i].value); 
    status.innerHTML = input.join(", "); 
    } 
}

從那裏你應該能夠得到任何你想要的。

來源

2013-05-08 19:44:28

我相信selectedOptions只是來自WebKit（Chrome和Opera）的東西，所以FF不適用於此，也許IE也不起作用。看看這個頁面，它顯示Mozilla尚未實現它：https：//developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement; – Goodwine 2013-05-08 19:50:58

這是不幸 – 2013-05-08 19:53:24

因爲我使用FF大氣壓，如果我使用Chrome其實我注意到，我會回答你一樣由xD – Goodwine 2013-05-08 20:03:01

如果你想獲得多項選擇，你可以嘗試像以下：

function GetSelectedItems() { 
      var select = document.forms[0].a; 
      var selectedList = []; 

      for (var i = 0; i < select.options.length; i++) { 
       if (select.options[i].selected) { 
        selectedList.push(select.options[i].value); 
       } 
      } 

      alert(Array.join(selectedList, ",")); 
     }

來源

2013-05-08 19:44:30 CSharpConductor

嗨，感謝您的回覆，我確實設法顯示選定選項的csv（在您的代碼幫助下）。現在，我怎麼能檢查它是否加入後的行爲？有什麼辦法可以顯示它，我想這樣做，因爲我將最終結果傳遞給了一個AJAX請求到php，但是響應是空白的。 – Priyanshu 2013-05-08 20:25:36

因此，而不是Array.join，你可以返回數組對象。 Array.join將其轉換爲字符串。在我的示例中，只需返回selectedList來代替警報。 – CSharpConductor 2013-05-08 20:32:10

當我從你的例子中顯示selectedList，而不使用AJAX時，它顯示一個csv。但是當我通過ajax發送相同的selectedList時，響應文本是空白的。此外，PHP識別selectedList作爲一個數組，因爲我沒有從我在代碼中使用的foreach循環中得到任何錯誤。當我發送警報時，php不會將其視爲數組。 – Priyanshu 2013-05-08 20:49:27

你可以做到以下幾點：

function getSelectedOptions(element) { 
    // validate element 
    if(!element || !element.options) 
     return []; //or null? 

    // return HTML5 implementation of selectedOptions instead. 
    if (element.selectedOptions) 
     return element.selectedOptions; 

    // you are here because your browser doesn't have the HTML5 selectedOptions 
    var opts = element.options; 
    var selectedOptions = []; 
    for(var i = 0; i < opts.length; i++) { 
     if(opts[i].selected) { 
      selectedOptions.push(opts[i]); 
     } 
    } 
    return selectedOptions; 
}

，然後改變你的ajaxmultiselect()所以你叫它像這樣：

input = getSelectedOptions(document.getElementById("a"));

您將不得不迭代val你好。

來源

2013-05-08 19:47:56 Goodwine

如何使用在JavaScript

回答

相關問題