Question

我有以下代码：

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代码。

如果用户一次选择一个值并单击“移动到右侧”按钮，则此方法可以正常工作。

但是我注意到，如果用户在文本框中输入数字2（例如）并从选择框中仅选择一个值并单击“移动到右侧”按钮，则可以正常工作。但是，如果用户第二次选择多个值并单击“移动到右侧”按钮，则所有选定的值都会转到右侧。即使警报显示为false，逻辑也无法验证else if语句。

我在这里做错了什么？

Answer 1

这可以满足您的要求 - 请参阅http://jsfiddle.net/LcWf2/

我不确定你打算用第一个＆＃34;否则＆＃34;在您的原始代码中阻止，但如果项目数与＆＃34; count＆＃34;相匹配，则与仅移动所选项目的请求相矛盾。输入，所以我省略了它。

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

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

Answer 2

大家好，我遇到了问题。在EDIT中提到的场景中，它第二次运行第一个if语句，并将所选值附加到右侧选择框。

以下是我创建的新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');
});

选择带有文本框的框

2 个答案: