0

次のコードがあります。

HTML:

<input type="text" id="count" name="count"/>
<div>
   <select id='canselect_code' name='canselect_code' multiple class='fl'>
        <option value='1'>toto</option>
        <option value='2'>titi</option>
        <option value='3'>tita</option>
        <option value='4'>titb</option>
        <option value='5'>titc</option>
        <option value='6'>titd</option>
    </select>
    <input type='button' id='btnRight_code' value='  >  ' />
    <br>
    <input type='button' id='btnLeft_code' value='  <  ' />
    <select id='isselect_code' name='isselect_code' multiple class='fr'>
    </select>
</div>

Javascript:

var allowMove = 0;
$('[id^=\"btnRight\"]').click(function (e) {
    var value = $('[name=count]').val();
    var chosen = $('#canselect_code :selected').length;
    if(chosen == value){
        alert('1');
        $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
        allowMove = value;
    }
    else if(allowMove < value && allowMove < chosen){
        alert('2');
        $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
        allowMove += 1;
    }
    else
        alert("Not Allowed!");
    });

$('[id^=\"btnLeft\"]').click(function (e) {
    allowMove = 0;
    $(this).next('select').find('option').remove().appendTo('#canselect_code');
});

右側に移動するボタンは、ユーザーが選択した数の要素のみを移動し、ユーザーがテキストボックスに入力した数と一致する必要があります。左ボタンは、選択されているかどうかにかかわらず、すべての値を左側の選択ボックスに移動します。選択ボックスでは、複数の値を選択できます。

では、どうすればいいのでしょうか？

編集：

var counter = 0;
$('[id^=\"btnRight\"]').click(function (e) {
    var value = $('[name=count]').val();
    var chosen = $('#canselect_code :selected').length;
    var tot = counter + chosen;
    alert(!(tot > value));
    if(chosen == value && counter != value) {
        counter = value;
        $('#canselect_code').find('option:selected').remove().appendTo('#isselect_code');
    }
    else if(chosen < value && !(tot > value) && counter < value){
         $('#canselect_code').find('option:selected').remove().appendTo('#isselect_code');
        counter+=chosen;
        alert(counter);
    }
    else {
        alert("Not Allowed!");
    }
});

$('[id^=\"btnLeft\"]').click(function (e) {
   counter = 0; $('#isselect_code').find('option').remove().appendTo('#canselect_code');
});

これは、私がなんとか作成した新しい JavaScript コードです。

ユーザーが一度に 1 つの値を選択し、右側に移動ボタンをクリックすると、これは正常に機能します。

ただし、ユーザーがテキストボックスに（たとえば）数字2を入力し、選択ボックスから値を1つだけ選択して右側に移動ボタンをクリックすると、正常に機能することに気付きました。しかし、2 回目にユーザーが複数の値を選択して右側に移動ボタンをクリックすると、選択したすべての値が右側に移動します。アラートには false が表示されますが、ロジックは else if ステートメントの検証に失敗します。

ここで何が間違っていますか??

4

2 に答える 2

0

こんにちはみんな私は問題を抱えています。編集で言及されたシナリオでは、最初の if ステートメントを 2 回目に実行し、選択した値を右側の選択ボックスに追加していました。

以下は、私が作成した新しい JavaScript で、私のニーズにぴったり合っています。

var counter = 0;
$('[id^=\"btnRight\"]').click(function (e) {
    var value = $('[name=count]').val();
    var chosen = $('#canselect_code :selected').length;
    var tot = counter + chosen;
    var flag = true;
    if(tot > value)
        flag = false;
    alert(!(tot > value) + '\n' + tot);
    if(chosen == value && counter != value && flag) {
     counter = value;   $('#canselect_code').find('option:selected').remove().appendTo('#isselect_code');
    }
    else if(chosen < value && flag && counter < value){
     $('#canselect_code').find('option:selected').remove().appendTo('#isselect_code');
        counter+=chosen;
        alert(counter);
    }
    else {
        alert("Not Allowed!");
    }
});

$('[id^=\"btnLeft\"]').click(function (e) {
   counter = 0; $('#isselect_code').find('option').remove().appendTo('#canselect_code');
});
于 2013-10-11T03:29:00.717 に答える