1

こんにちは、私はこの問題で数日間立ち往生しています。ユーザーがデータをやり取りできる 2 つのリスト ボックスがあります。リストボックスの下のテーブルにあるラベルにも表示するには、右側のリストボックスにある項目が必要です。

ラベルに表示するテキストを取得しましたが、項目ごとに新しい行を入力することはできません (リストボックスに表示されるように)。テキストにスペースが入り、まだ新しい行で分割されていません。私はjavascriptにかなり慣れていないので、親切にしてください:)

これが私のJavaScriptです：

    function displayLabel()
            {
                var item = document.getElementById("lstRightBox").options.innerText;
                var arr = new Array();
                var test = item.split(arr.join("|"));
                document.getElementById("label").innerHTML = test.join("\r\n");
                return true;
            }

追加した

リストボックス間でアイテムを転送するコードは次のとおりです。

    // This moves selected items
    function move_list_items(lstLeftBox, lstRightBox)
      {
        $("#"+lstLeftBox+"  option:selected").appendTo("#"+lstRightBox).toString;
      }

      //this will move all items 
    function move_list_items_all(lstLeftBox, lstRightBox)
      {
        $("#"+lstLeftBox+" option").appendTo("#"+lstRightBox);
      }

編集

これが私の表示機能の更新です。ボタンがクリックされるたびに実行されるように、移動関数 (上記) で呼び出しています。現在、移動した各アイテムのラベルに [object Object] が表示されています。

    function displayLabel(lstLeftBox, lstRightBox)
          {
            $("#"+lstRightBox+"  option").each(function(){
                document.getElementById("label").innerHTML += $(this);
            });
          }
4

2 に答える 2

0

split()と の使用について少し混乱していると思いますjoin()。書かれているように、コードは存在によって分割されるのでは"|"なく、すべての文字で分割されます。これは、呼び出している配列に値がないためです.join()。

私はこれがあなたが探していることをすると思います：

    function displayLabel()
        {
            var item = document.getElementById("lstRightBox").options.innerText;
            var test = item.split("|");
            document.getElementById("label").innerHTML = test.join("\r\n<br/>");
            return true;
        }

これがどのように機能するかの内訳は次のとおりです。

  • lstRightBoxからの値は で区切られていると想定しています|。
  • この行は変数にvar test = item.split("|");配列を作成し、配列のtest各要素は文字列とは異なる値になりitemます (各値は で区切られます|)。
  • 次に、次の行で要素test.join("\r\n<br/>")の HTML に の出力を配置します。ここで、 の出力は、各項目が で区切られた文字列です。labeltest.join("\r\n<br/>")"\r\n<br/>"

<br/>からの一致する各アイテムの間に改行を表示するように、そこにバックを追加したことに注意してくださいtest。

を使用しておそらく同じことを達成できることにも注意してください.replace()。

    function displayLabel()
        {
            var items = document.getElementById("lstRightBox").options.innerText;
            document.getElementById("label").innerHTML = items.replace("|", "\r\n<br/>");
            return true;
        }

編集:アイテムを移動するために使用しているコードを見ると、ここで同様のことができると思います。replace() または .join() を実行する代わりに、既に使用しているのと同じ jQuery セレクターを利用できます。

// selected items
function display_list_items(lstBox)
  {
    $("#"+lstBox+"  option:selected").each(function(){
        document.getElementById("label").innerHTML += $(this);
    });
  }

  // all items 
function display_list_items_all(lstComplete, lstRightBox)
  {
    $("#"+lstBox+"  option").each(function(){
        document.getElementById("label").innerHTML += $(this);
    });
  }
于 2013-04-23T17:00:18.010 に答える