js实现一组下拉框互斥选择功能
js实现一组下拉框互斥选择功能
系统实现中往往会有这样的需求:
一组下拉框互斥选择,如做考试系统或问卷调查系统中的连线题。
一组选择框的内容相同,a下拉框中选择后,在后续的其他下拉框中即不能选择(如图)。
下边的例子基于brocade的MutexSelections组件实现,可以看到代码结构很清晰。
访问MutexSelections组件的源码:http://brocade.sourceforge.net/zh/source/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" c>
<title>test the ajax</title>
<script src="_include.js" type="text/javascript"></script>
<script type="text/javascript">
$i("../lib/prototype-1.5.0.js","../lib/effects.js");//加载库文件。
$i(
"../src/utility.js",
"../src/brocade.js",
"../src/misc/MutexSelections.js"
);
</script>
</head>
<body>
<p>test MutexSelections.</p>
<div>
<form id="tf" method="post" action="load.php" enctype="multipart/form-data">
<input type="button" value="reset">
</form>
</div>
<script type="text/javascript">
var t = document.getElementById('tf');//获取显示mutex的容器组件。
var s = new bc.m.MutexSelections();
s.binding([{value:'',text:''},{value:'a',text:'选项1',selected:true},{value:'b',text:'选项2'},{value:'c',text:'选项3'}]);//绑定数据。
t.appendChild(s.generateItem("a"));//产生需要个数的互斥组件。
t.appendChild(s.generateItem("b"));
t.appendChild(s.generateItem("c"));
function r(){
s.reset();
}
</script>
</body>
</html>