1

標準の HTML 選択になる jsp ファイルに struts 選択セクションがあります。

        <s:select
            id="selectedTillsSelectId"
            name="selectedTillsSelectName"
            cssClass="tillDropDownEntryList"
            list="tillDropDownEntryList"
            listKey="key"
            listValue="value"
            value="%{selectedTills}"
            />

になる

<select name="selectedTillsSelectName" id="selectedTillsSelectId" class="tillDropDownEntryList">
  <option value="1">0001</option>
  <option value="2">0002</option>
  <option value="3">0003</option>
  <option value="4">0004</option>
  <option value="5">0005</option>
  <option value="6">0006</option>
  <option value="7">0007</option>
  <option value="8">0008</option>
</select>

私の理解では、struts は単にリストに入力するだけであり、その時点から struts が関与していることを忘れることができます。

これは分割リストとして表示されます

All              Selected
0001             
0002
0003
0004
0005
0006
0007
0008

listselect jquery のおかげで:

<script type="text/javascript" src="<s:url value="/js/jQuery/jquery-1.4.2.min.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/jQuery/listselect.js"/>"></script>

これはすべて、私が修正を求められた既存の作業コードです。左側の個々のアイテムをクリックすると、右側の「選択済み」列に移動します。0003 をクリックすると、次のようになります。

All              Selected
0001             0003
0002
0004
0005
0006
0007
0008

選択した列にすべてを移動するボタン、「すべて選択」ボタンを追加することを任されました。

ボタンを追加しましたが、これは問題なく動作しますが、やりたいことができません。オプションをリストに入れることができ、それらを繰り返し「選択」できますが、これはエントリを強調表示するだけです。実際にエントリを 2 列目に移動したいと考えています。リスト項目をクリックして呼び出しても何も起こらないか、有効ではありません。オンラインの提案で見つけることができるすべての順列を試しました。「すべて選択」機能の現在の状態を見ると明らかになるかもしれません。 : (心に留めておいてください。主に、私が試したことを思い出すのに役立つように、コメントアウトされたバージョンを保持していますが、それらは私が何を試したかを示す良い指標になると思います)

function selectAllTills() 
{
//    alert("Select all the Tills..."); 
    var bothLists = document.getElementsByTagName("select");
    var unselectedList = bothLists[0];
    var selectedList = bothLists[1];
    var allOptions = unselectedList.getElementsByTagName("option");
    for (var i=0; i < allOptions.length; i++) {
//            allOptions[i].selected = true;
//      allOptions[i].attr('selected', 'selected');
//      allOptions[i].selected = true;
//      $("#selectedTills").val(i).attr("selected","selected");
//      alert("allOpions is" + allOptions[i]);
//      selectedList.val(allOptions[i]);
      $("#selectedTillsSelectId").val(allOptions[i]);
    }

//    $("#selectedTillsSelectId").find("option").appendTo(".tillDropDownEntryList"); //tried based on nnnnnn's suggestion

//    $("div#tillSelectionDiv select option").each(function(){
//        $(this).attr("selected","selected");
//      $(this).trigger("click");
//      $(this).click();
//      alert($(this));
//    });

}

この時点で、実際にはJavaScriptをあまり使用していないことを告白します。私は Java プログラマーなので、OOP を理解しており、このページで見たことのほとんどを読むことができ、それは理にかなっています。Firebug は、私が繰り返し処理している項目は HTMLElementOption であり、これはほぼ正しいように聞こえることを示唆しており、jQuery を使用すると、要素に対して「クリック」を呼び出すことができると思われますが、それは機能しませんでした...上記のように、選択された項目の繰り返しと設定はアイテムを選択しますが、アイテムを移動するのではなく、左側で青色にするだけです。これが標準のドロップダウンであり、jQuery listselect ではない場合は問題ないと思います。

私が何か見逃した場合は、コメントでお知らせください。質問を修正できます。

どうもありがとう、ミッチ。

4

1 に答える 1

2

listselect.js がどのように機能するかはわかりませんが、すべてのオプション要素を文字通り最初の選択から 2 番目の選択に移動するには、1 行の jQuery で実行できます。「すべて移動」ボタンがクリックされたときに呼び出す関数に次のコードを追加するだけです。

$("#selectedTillsSelectId").find("option").appendTo("#idOfSecondSelectHere");

デモ: http://jsfiddle.net/AHn7Z/

2 番目の select 要素には、.appendTo().

于 2013-08-22T11:53:58.187 に答える