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

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

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

我在这里做错了什么？

4

2 回答 2

1

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

我不确定您对原始代码中的第一个“else”块的意图是什么，但它与仅在项目数与“count”输入匹配时才移动所选项目的请求相矛盾，因此我省略了它。

$('[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');
});
于 2013-10-10T19:29:25.200 回答
0

大家好，我遇到了问题。在 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');
});
于 2013-10-11T03:29:00.717 回答