当前位置: 代码迷 >> JavaScript >> select上下选择框
  详细解决方案

select上下选择框

热度:342   发布时间:2012-07-30 16:19:05.0
select左右选择框
js:
function moveOption(e1, e2) {
try {
for ( var i = 0; i < e1.options.length; i++) {
if (e1.options[i].selected) {
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i = i - 1;
}
}
document.getElementById("incepter").value = getvalue(document.myform.list2);
} catch (e) {
}
}
function changepos(obj, index) {
if (index == -1) {
if (obj.selectedIndex > 0) {
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex - 1));
}
} else if (index == 1) {
if (obj.selectedIndex < obj.options.length - 1) {
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex + 1));
}
}
}

html:
<form name="myform">
<table border="0" width="100%">
<tr>
<td style="text-align: left" width="25%"><select
style="width: 90%" name="list1" size="12" id="toSelect"
ondblclick="moveOption(document.myform.list1, document.myform.list2)">
<option value="1">
1 </option><option value="2">
2 </option><option value="3">
3 </option><option value="4">
4 </option>

</select>
</td>
<td style="text-align: left" width="10%" align="center"><input
type="button" class="button" value="添加"
onClick="moveOption(document.myform.list1, document.myform.list2)">
<br /> <br /> <input type="button" value="删除"
class="button"
onclick="moveOption(document.myform.list2, document.myform.list1)">
</td>
<td style="text-align: left" width="25%"><select
id="selected" style="width: 90%" name="list2" size="12"
ondblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
<td style="text-align: left" width="10%"><input
onClick="changepos(list2,-1)" type="button" value="上移"
class="button" /><br> <br /> <input
onClick="changepos(list2,1)" type="button" value="下移"
class="button" /></td>
<td width="30%">&nbsp;</td>
</tr>
</table></form>

现在把在list2的数据重新排列(即上移下移),在IE中select框不断变小。在google chrome中,报uncaught TypeError: Property 'options' of object #<HTMLSelectElement> is not a function .帮忙解决。。。

------解决方案--------------------
swapNode方法只有IE才支持。
------解决方案--------------------
JScript code
function changepos(obj, index) {
    if (index == -1) {
        if (obj.selectedIndex > 0) {
            //obj.replaceChild(obj.options[obj.selectedIndex], obj.options[obj.selectedIndex - 1]);
            obj.insertBefore(obj.options[obj.selectedIndex], obj.options[obj.selectedIndex - 1]);
        }
    } else if (index == 1) {
        if (obj.selectedIndex < obj.options.length - 1) {
            //obj.options[obj.selectedIndex].swapNode(obj.options[obj.selectedIndex + 1]);
            obj.insertBefore(obj.options[obj.selectedIndex + 1], obj.options[obj.selectedIndex]);
        }
    }
} 
  相关解决方案