Списки выбора
А как сделать чтобы было два окошка. В одном был список, а второе, пустое, и стрелочка, чтобы перекидывать нужные данные во второе окно. Подскажите плз. Очень нужно
|
подскажем
создать 2 селекта 1 полный,другой такой же, но все элементы скрыты и 2 кнопки -> и <- в скрипте повесить обработчики при нажатии "туда" один пункт будет удаляться из полного (или , ЛУЧШЕ, скрываться), а во втором - появляться проблем нет я думаю, вы сами справитесь если список динамический, то вместо скрытия придется удалять и добавлять. |
Мне особенно понравилась фраза "вы сами справитесь" =)
Учитывая что я только начал изучать JS, потому-что в моём php проекте нужно доработать интерфейс, а вообще первое окно заполняется из БД SQL запросом. А то что перекиывается во второе окно должно обрабатываться другим запросом. |
McLotos,
а ты хотел полностью рабочий скрипт чтоб за тебя ктото сделал?-тогда тебе в раздел Работа |
<!-- //Создает объект класса Option и возвращает его. //Пришлось вводить этот метод искуственно, т.к. JavaScript //почему-то не может работать с объектами класса Option , //полученными непосредственно из объекта Select "напрямую" function MakeOpt(obj) { var opt = new Option(obj.text,obj.value); return opt; } //Подсчитывает число элементов в списке с id="list_name" и затем вставляет //его в элемент страницы с id="<имя_select>_disp". function CountItems(list_name) { var list=document.getElementById(list_name); var display=document.getElementById(list_name +"_num"); var len=list.length; display.innerHTML=len; } //Добавляет элемент item (объект класса Option) в список list. //Если в списке-получателе не выделен ни один элемент, то //вставляется в конец списка, в противном случае - добавляется //после курсора выделения. function AddItem(list,item) { var ind=list.options.selectedIndex; var len=list.length; var mem //Конец списка, или же ничего не выделено? if(ind==-1 || ind+1==len) list.options[len]=item; //Все-таки, что то выделено и не в конце. Сдвигаем все //элементы после курсора на одну позицию вниз, после чего //добавляем вставляемый на освободившееся место. Курсор остается //на прежнем месте. else { for(i=len;i>ind;i--) { mem=MakeOpt(list.options[i-1]); list.options[i]=mem; } list.options[ind+1]=item; list.options[ind].selected=true; } } //Перемещает объект из списка list1 в список list2. //После перемещения происходит автоматический пересчет //кол-ва элементов. function MoveItem(list1_name,list2_name) { var list1=document.getElementById(list1_name); var list2=document.getElementById(list2_name); var ind=list1.options.selectedIndex; if(ind==-1) return false; //Запоминаем копируемый элемент var opt=MakeOpt(list1.options[ind]); //Вставляем его в список-получатель AddItem(list2,opt); //Удаляем элемент из списка-источника list1.options[ind]=null; CountItems(list1_name); CountItems(list2_name); } //Служебная функция, выполняющая перемещение объектов //списка list c позиции index1 на позицию index2. //В данном случае - просто меняет эти два элемента списка //местами. function swap(list,index1, index2) { var memValue=list.options[index1].value; var memText=list.options[index1].text; list.options[index1].value=list.options[index2].value; list.options[index1].text=list.options[index2].text; list.options[index2].value=memValue; list.options[index2].text=memText; } //Собственно функция по перемещению элементов списка с id=list_name //на одну позицию в направлении dir. Параметр dir > 0, если смещаем //вниз и <0, соответсвенно, если - вверх function MoveOpt(list_name, dir) { var list=document.getElementById(list_name); var ind=list.selectedIndex; var len=list.length; if(ind<0) return false; //Убеждаемся, что есть что и куда перемещать if((ind>=1 && dir==-1) || (ind+1<len && dir==1)) { swap(list,ind,ind+dir) list.options[ind+dir].selected=true; list.options[ind].selected=false; list.focus(); } } </select> </div></td> <td valign="middle"><div align="center"> <input type="button" style="width:75 px" value=" >> " onClick="MoveItem(\'list1\',\'list2\');"> <br> <input type="button" style="width:75 px" value=" << " onClick="MoveItem(\'list2\',\'list1\');"> <input type="button" style="width:75 px" value=" > " onClik="Move(\'list1\',\'list2\');"> </div></td> <td><div align="center"> <nobr>Personal recipients (<font color=red id="list2_num"></font>)</nobr><br> <select class="select" id="list2" style="width: 175px" name="list2" size="8" multiple> </select> </div></td> <td valign="middle"> <input type="button" value="/\" onClick="MoveOpt(\'list2\',-1);"><br> <input type="button" value="\/" onClick="MoveOpt(\'list2\',1);"> </td> <td> <input type=submit name="set_filter" value="Find Calls" ></td> </tr> </table></td> </tr> </table> </form> </div>Вот такой вариант в принципе вполне логичен. Остаётся ещё парочка вопросов: 1. Как добавить кнопку, которая перекинет ВСЁ(либо вместо неё сделать чтобы можно было выбирать несколько элементов сразу, к примеру как в списках со множественным выбором), и как сделать так чтобы всё что попадало в list2, автоматически прогонялось через SQL запрос? |
=)
Сам спросил, сам ответил, сам объяснил, приколист однако |
Часовой пояс GMT +3, время: 18:39. |