1

我有一个多选框，我想在 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 做同样的事情？

我还尝试为值的长度运行一个循环，但它只计算第一个选择的长度。我想显示所有将被选中的值。

任何帮助将不胜感激。

4

4 回答 4

3

您可以执行以下操作：

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

您将不得不迭代这些值。

于 2013-05-08T19:47:56.183 回答
1

如果您想获得多个选定的项目，您可以尝试以下操作：

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-08T19:44:30.507 回答
0 
document.getElementById('a').options //All Options

这将为您提供一系列可以迭代的选项。

于 2013-05-08T19:38:22.000 回答
0

对于给定的<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-08T19:44:28.843 回答