Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > multiSelect


Автор: comtat 23.6.2007, 22:23
Стоит задача передавать содержимое одного селекта в другой
например как в этом коде 
Код

<html>
<head>
<title>Multy Select</title>

<script type="text/javascript">
function replacer(select1, select2, bool) {
  var element;
  if(bool) {
    while(element = select1.firstChild)
        select2.appendChild(select1.removeChild(element));
  }
  else {
    for(var i = 0; element = select1.options[i]; i++) {
      if(element.selected) {
        select2.appendChild(element);
        element.selected = bool;
      }
    }
  }  
}

function mover(o, bool) {
  var e = o.options, i = o.selectedIndex, n = (bool) ? i - 1 : i + 1; 
  (i > -1 && n >= 0 && n < o.length) ? (o.insertBefore(o.removeChild(e[i]), 
    e[n]), o.selectedIndex = n) : '';  
}

</script>

</head>

<body>
<div>
 <form mathod="POST" action="http://localhost:8066/index3" name="TForm1_select" onsubmit="javasript:alert('form post')">

<table border="0"><tr><td>


<select name="select_left" multiple="multiple" size="10" id="select_left_id" ondblclick="javascript:replacer(document.getElementById('select_left_id'), document.getElementById('select_right_id'), false);">
<option value="1">№ 1</option>
<option value="2">№ 2</option>
<option value="3">№ 3</option>
<option value="4">№ 4</option>
<option value="5">№ 5</option>
<option value="6">№ 6</option>
<option value="7">№ 7</option>
<option value="8">№ 8</option>
<option value="9">№ 9</option>
<option value="10">№ 10</option>
</select>
</td>
<td>
<button name="button_to_right" id="id_button_to_right" onclick="javascript:replacer(document.getElementById('select_left_id'), document.getElementById('select_right_id'), false); return false;" style="display:block; margin-bottom:15px"> > </button>
<button name="button_all_to_right" id="id_button_all_to_right" onclick="javascript: replacer(document.getElementById('select_left_id'), document.getElementById('select_right_id'), true); return false;" style="display:block; margin-bottom:15px"> All>> </button>

<button name="button_all_to_left" id="id_button_all_to_left"  onclick="javascript: replacer(document.getElementById('select_right_id'), document.getElementById('select_left_id'), true); return false;" style="display:block; margin-bottom:15px"> << All  </button>
<button name="button_to_left" id="id_button_to_left" onclick="javascript: replacer (document.getElementById('select_right_id'), document.getElementById('select_left_id'), false); return false;" style="display:block; margin-bottom:15px"> < </button>

</td>
<td>
<select name="select_right" multiple="multiple" size="10" id="select_right_id" ondblclick="javascript: replacer(document.getElementById('select_right_id'), document.getElementById('select_left_id'), false);">
</select>
</td>
<td>
<img src="arrow_up.gif" onclick="javascript:mover(document.getElementById('select_right_id'), true)" style="display:block; margin-bottom:15px"/>
<img src="arrow_down.gif" onclick="javascript:mover(document.getElementById('select_right_id'), false)" style="display:block; margin-bottom:15px"/>
</td>
</tr></table>

<input type="submit" value="send"/>

 </form> 
</div>
</body>
</html>

только есть проблема, когда в левом селекте выделяешь строки или Ctrl'ом или Shift'ом 
то в правый селект передается максимум 2 значения
как с этим можно побороться ??

Автор: SelenIT 24.6.2007, 00:35
comtat, когда i-й элемент переносится во второй селект, i-м становится следующий - но в цикле-то i уже пройдено, и следующий за выделенным элементом в итоге пропускается. Лечится, например, добавлением
Код

    i--;
после 16-й строки.

P.S. Получается, в готовых скриптах в, судя по всему, http://forum.vingrad.ru/index.php?showtopic=119983&view=findpost&p=913939 этого кода, эта проблема осталась... надо бы исправить;)

Автор: comtat 24.6.2007, 03:14
SelenIT , огромное спасибо все заработало  smile 
Цитата(SelenIT @  24.6.2007,  00:35 Найти цитируемый пост)
P.S. Получается, в готовых скриптах в, судя по всему, развитии этого кода, эта проблема осталась... надо бы исправить;) 

Это тоже верно, как раз оттуда

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)