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

特定の<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 に答える
0 
document.getElementById('a').options //All Options

これにより、反復できるオプションの配列が得られます。

于 2013-05-08T19:38:22.000 に答える