2

このコードは、インターネットで役立つとわかった例から入手しました。左と右の 2 つのリストボックスを使用し、左の要素を右の要素に、またはその逆に渡します。これは、オプション付きの選択を含む HTML です。

<select id="SelectLeft" multiple="multiple">
 <option value="1">Stack Overflow</option>
 <option value="2">Server Fault</option>
 <option value="3">Ask Ubuntu</option>
 <option value="4">Super User</option>
</select>
<button id="MoveRight"> >> </button>
<button id="MoveLeft"> << </button>
<select id="SelectRight" multiple="multiple"></select>

リストボックス間で要素を移動する JavaScript は次のとおりです。

$(function() {
 $("#MoveRight,#MoveLeft").click(function(event) {
  var id = $(event.target).attr("id");
  var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
  var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
  var selectedItems = $(selectFrom + " :selected").toArray();
  $(moveTo).append(selectedItems);
   selectedItems.remove;
  });
});

ご覧のとおり、コードは、押されたボタンに応じて、追加および削除する必要がある選択された要素を決定するだけです。右側のリストボックス ("SelectRight") にオプションがないことを検出する必要があります。たとえば、最初に何も押されていない場合や、ユーザーがすべてのアイテムを削除した場合などです。

私が持っている検証プロセスをトリガーできるように、これを検出する方法が必要です。

編集

ご回答ありがとうございます$("#SelectRight").is(":empty")。しかし、それは私が必要とするものではありません。リストボックスが空になるたびにイベントを起動する必要があります。たとえば、これを行うと：

if($("#SelectRight").is(":empty")) alert("It works?? =O");

このアラートは、ページが読み込まれたときにのみ表示されますが、要素を追加してから削除すると、トリガーされなくなります。だから、イベントハンドラか何かを追加する必要があると思います。多分JQuery.on()か何か??

4

5 に答える 5

8 
$("#SelectRight").is(":empty")
于 2012-05-18T16:47:26.073 に答える
4 
$('#SelectRight option').length:

また

$('#SelectRight').is(':empty');
于 2012-05-18T16:47:34.570 に答える
3

どうですか：

$("#MoveRight,#MoveLeft").click(function(event) {
    var id = $(event.target).attr("id");
    var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
    var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
    var selectedItems = $(selectFrom + " :selected").toArray();
    $(moveTo).append(selectedItems);
    selectedItems.remove;
    if($('#SelectRight option').length<=0) console.log('Right empty');
});​

jsFiddle の例。

于 2012-05-18T16:50:22.000 に答える
1

これを使って：

​$('#SelectRight').find('option').size();
于 2012-05-18T16:51:29.420 に答える
0

リスト ボックスが空かどうかをチェックする if ステートメントを追加しないのはなぜですか。selectedIteams.remove の後に配置します。これにより、関数が呼び出されてリスト ボックスが空になるたびにチェックされます。または、要素に onchange = 'someFunction()' 関数を追加して、要素が変更されるたびにチェックすることもできます。

于 2012-05-18T19:18:19.700 に答える