о перемещении элементов в selectbox

Я пытаюсь переместить элементы в поле выбора с помощью кнопок .. для этого я использовал swapNode(). Но он работает только в IE. в хроме не работает, как сделать его работу в хроме Вот мой кодо перемещении элементов в selectbox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>Moving the options up and down in Multiple select box </title> 
<script type="text/javascript"> 
function move(id) 
{ 

if (id=='up') 
{ 
    var len= document.f1.selectbox1.options.length; 
    if (document.f1.selectbox1[0].selected) 
    { 
     alert("This is the first record"); 
     return false; 
    } 
    var up_id=document.f1.selectbox1.selectedIndex; 
    document.f1.selectbox1[up_id].swapNode(document.f1.selectbox1[up_id-1]); 
} 
if (id=='down') 
{ 
var len=document.f1.selectbox1.options.length; 
    if (document.f1.selectbox1[len-1].selected) 
    { 
     alert("This is last record"); 
     return false; 
    } 
    var down_id=document.f1.selectbox1.selectedIndex; 
    document.f1.selectbox1[down_id].swapNode(document.f1.selectbox1[down_id+1]); 
} 
if (id=='top') 
{ 
    var len=document.f1.selectbox1.options.length; 
    if (document.f1.selectbox1[0].selected) 
    { 
     alert("This is the first record"); 
     return false; 
    } 
    var top_id=document.f1.selectbox1.selectedIndex 
    for (var j=top_id;j>0 ;j--) 
    { 
      document.f1.selectbox1[j].swapNode(document.f1.selectbox1[j-1]); 
    } 
} 
if (id=='bottom') 
{ 
    var len=document.f1.selectbox1.options.length;; 
    if(document.f1.selectbox1[len-1].selected) 
     { 
      alert("This is last record"); 
      return false; 
     } 
     var bot_id=document.f1.selectbox1.selectedIndex 
     for (var k=bot_id; k<len-1;k++) 
     { 
       document.f1.selectbox1[k].swapNode(document.f1.selectbox1[k+1]); 

     } 
} 
} 
</script> 
</head> 
<body> 
    <form name="f1"> 
<select multiple size="20" style="width:30%" name="selectbox1" id="select_box"> 
<option id="1">First item</option> 
<option id="2">Second item</option> 
<option id="3">Third item</option> 
<option id="4">Fourth item</option> 
<option id="4">Fifth item</option> 
<option id="4">Sixth item</option> 
<option id="4">Seventh item</option> 
<option id="4">Eighth item</option> 
<option id="4">Ninth item</option> 
<option id="4">Tenth item</option> 
</select><br> 
<input type="button" value="Up" onClick="move('up')"> 
<input type="button" value="Down" onClick="move('down')"> 
<input type="button" value="Top" onClick="move('top')"> 
<input type="button" value="Bottom" onClick="move('bottom')"> 
    </form> 
</body> 
</html>

источник

2010-12-14 Mihir

swapNode() является расширением Microsoft DOM и так как результат не будет признан другими, чем IE браузеров.

Я запустил ваш пример в FireFox и использовал FireBug (вы должны скачать этот плагин и использовать его в подобных ситуациях, если вы этого еще не сделали), и, конечно же, консоль выдавала ошибку, что swapNode() был «не функция».

Если бы я посоветовал вам отсюда, я бы посоветовал искать плагин jQuery или что-то в этом роде, которое обеспечивает такую функциональность. Библиотеки, такие как jQuery, как правило, предлагают кросс-браузерные решения для таких проблем javascript, и лучше всего чаще, чем не open source (так что вы можете заглянуть в код и переработать свою собственную реализацию, если хотите). http://jquery.com/

В качестве альтернативы вы можете просто предоставить функцию swapNode() в вашем коде, чтобы другие браузеры могли ее забрать. Если вы планируете пройти этот маршрут, вы сможете найти реализацию с быстрым поиском Google. Я предоставил ссылку на одну такую реализацию ниже (я не рассматривал или не использовал этот код, используйте только после просмотра). Однако, по моему скромному мнению, лучше избегать решений, зависящих от браузера, поскольку они не всегда являются будущими доказательствами и часто могут привести к непредвиденным проблемам. http://sundberg.it/2006/05/12/swapnode_in_firefox

Удачи!

источник

2010-12-14 05:26:54 Kai

Это может быть полезно вам: http://www.javascripttoolbox.com/lib/selectbox/jquery.php – Kai

о перемещении элементов в selectbox

ответ

Смежные вопросы