javascript phpのすべてのリストボックスの値を取得する

私はカテゴリとjavascriptにアイテムを割り当てることができるページを持っています。これにより、ユーザーは1つのボックスから複数のアイテムを左右に1つずつ移動できます。選択肢を微調整します（右のボックスで終わります）。リストボックスの代わりにリスト間を移動できる方が良いかもしれませんが、選択ボックスは、クリックして選択すると良いでしょう。ユーザーが完了したら、私は右のボックスにPHPスクリプトに項目を投稿する必要があります。しかし、正しいリスト内のすべてのアイテムをキャプチャする方法を理解するのに問題があります。スクリプトにはフォームがないので、document.formから取得できません。アイテムは実際には選択されていないので、リストに値を設定するだけで、それらをすべて取得したいのです。リスト全体を持つ変数はありますか？スクリプトは時間がかかるのでここでは機能する関数です。基本的には、最後に右のボックスに要素のリストを書き出す方法が必要です。ご意見ありがとうございます。javascript phpのすべてのリストボックスの値を取得する

function moveToRightOrLeft(side) { 
    var listLeft = document.getElementById('selectLeft'); 
    var listRight = document.getElementById('selectRight'); 
    if (side == 1) { 
     if (listLeft.options.length == 0) { 
      alert('You have already assigned all items to the category'); 
      return false; 
     } else { 
      var selectedItem = listLeft.options.selectedIndex; 
      move(listRight, listLeft.options[selectedItem].value, listLeft.options[selectedItem].text); 
      listLeft.remove(selectedItem); 
      if (listLeft.options.length > 0) { 
       listLeft.options[0].selected = true; 
      } 
     } 
    } else if (side == 2) { 
     if (listRight.options.length == 0) { 
      alert('The list is empty'); 
      return false; 
     } else { 
      var selectedItem = listRight.options.selectedIndex; 
      move(listLeft, listRight.options[selectedItem].value, listRight.options[selectedItem].text); 
      listRight.remove(selectedItem); 
      if (listRight.options.length > 0) { 
       listRight.options[0].selected = true; 
      } 
     } 
    } 
} 

function move(listBoxTo, optionValue, optionDisplayText) { 
    var newOption = document.createElement("option"); 
    newOption.value = optionValue; 
    newOption.text = optionDisplayText; 
    listBoxTo.add(newOption, null); 
    return true; 
}

出典

2012-04-26 user1260310

-1。 –

@DenisErmolin –

まず、構文に誤りがあると思います。特定の選択ボックスのすべてのオプションを書き出すために、あなたはこのような何かを行うことができるはず

var value = listLeft.options[listLeft.selectedIndex].value;

：選択ボックスの選択した項目の値を取得するには、のようなものを使用します

var options = document.getElementById('selectRight').options; 
for (i=0; i<options.length(); i++) 
    document.write("value "+ i +" = "+ options[i].value);

私はあなたのコードの小さなビットを再加工し、ここでは完全な作業例です：ひどい整形のために

<html> 
<head> 
    <style type="text/css"> 
     select 
     { 
      width:100px; 
     } 
    </style> 
    <script type="text/Javascript"> 
     function moveToRightOrLeft(side) 
     { 
      if (side == 1) 
      { 
       var list1 = document.getElementById('selectLeft'); 
       var list2 = document.getElementById('selectRight'); 
      } 
      else 
      { 
       var list1 = document.getElementById('selectRight'); 
       var list2 = document.getElementById('selectLeft'); 
      } 

      if (list1.options.length == 0) 
      { 
       alert('The list is empty'); 
       return false; 
      } 
      else 
      { 
       var selectedItem = list1.options[list1.selectedIndex]; 
       move(list2, selectedItem.value, selectedItem.text); 
       list1.remove(list1.selectedIndex); 
       if (list1.options.length > 0) 
        list1.options[0].selected = true; 
      } 
      return true; 
     } 

     function move(listBoxTo, optionValue, optionDisplayText) 
     { 
      var newOption = document.createElement("option"); 
      newOption.value = optionValue; 
      newOption.text = optionDisplayText; 
      listBoxTo.add(newOption, null); 
      return true; 
     } 

     function showContents(listBoxID) 
     { 
      var options = document.getElementById(listBoxID).options; 
      for (var i = 0; i < options.length; i++) 
       alert("Option "+ options[i].value +" = "+ options[i].text); 
     } 
    </script> 
</head> 
<body> 
    <select id="selectLeft" multiple="multiple"> 
     <option value="1">Value 1</option> 
     <option value="2">Value 2</option> 
     <option value="3">Value 3</option> 
    </select> 
    <button onclick="moveToRightOrLeft(2)">&lt;</button> 
    <button onclick="moveToRightOrLeft(1)">&gt;</button> 
    <select id="selectRight" multiple="multiple"> 
    </select> 
    <button onclick="showContents('selectRight')">Show Contents</button> 
</body> 
</html>

出典

2012-04-26 18:49:40 Travesty3

を編集するのに2秒かかりますが、それ自体は機能しませんでした。スクリプトの変数に基づいて単一の値をdocument.writeする構文を提案できますか？おそらく私はそこからそれを得ることができます。 – user1260310

あなたは何が問題になっているのか分かりません。上の例をコピーして新しいHTMLページに貼り付けるとうまくいきます。 'var options = document.getElementById（ 'selectRight'）。options;'を実行すると 'selectRight'ボックスのすべてのオプションが' options'という配列に配置されます。そして、あなたはそれらをループすることができます（私のようにforループ...）し、あなたが望むものを何でもしてください。 [i] .value）; '、またはあなたがそれらで何をしたいかを指定します。どの部分に問題がありますか？ – Travesty3

私はあなたのことを見るためにリフレッシュする前に私のコメントを送ったに違いない！私はalert/document.writeなどを起動するハンドラを含めなかったので、おそらく私のためにはうまくいきませんでした。多くの感謝！ – user1260310

javascript phpのすべてのリストボックスの値を取得する

答えて

関連する問題