Выберите окно с текстовыми полями

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'); 
}); 

Я хочу кнопку шаг-к-правым стороне только перемещать количество элементов, выбранных пользователем, и оно должно соответствовать числу, введенному пользователем в текстовом поле. Левая кнопка перемещает все значения в поле выбора слева, независимо от того, выбран ли он или нет. В поле выбора можно выбрать несколько значений.

Итак, как мне это сделать?

EDIT:

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'); 
}); 

Это новый Java-код, который я сумел создать.

Это прекрасно работает, если пользователь выбирает одно значение за один раз и нажимает кнопку «перемещение вправо».

Однако я заметил, что если пользователь вводил номер 2 (например) в текстовое поле и выбирал только одно значение из окна выбора и нажимает кнопку «перемещение вправо», он отлично работает. Но во второй раз, если пользователь выбирает несколько значений и нажимает кнопку «перемещение вправо», все выбранные значения переходят в правую сторону. Несмотря на то, что предупреждение отображает false, логика не выполняется при проверке инструкции else if.

Что я здесь делаю неправильно?

Answer 1

Привет, ребята, у меня возникла проблема. В сценарии, указанном в 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'); 
}); 

Answer 2

Это делает то, что вы просите - см http://jsfiddle.net/LcWf2/

Я не уверен, что вы собирались с первым «еще» блоком в исходном коде, но это противоречит запросу только переместить выбранные элементы если количество элементов соответствует входу «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'); 
});