HTML标签select 巧妙设置只读

由于html标签select没有为我们提供readonly属性，disabled属性又不能和后台交互，要真正实现只读效果很难，不过我们可以变通处理一下：看下面的处理

<select name=”select”> <option selected=”selected” value=”1″>aaaaa</option> <option value=”2″>bbbbb</option> <option value=”3″>ccccc</option></select>

<script>// <![CDATA[
function selectFocus(obj){
var objValue = obj.value;
var objText = obj.options[obj.selectedIndex].text;
obj.options.length = 0;
obj.options.add(new Option( objText,objValue));//动态添加选中项
obj.blur();//妙处是单击时（不是连续单击）下拉框不显示
}
// ]]></script>

//效果如下

上面的处理我想大家都明白了，就是在select获得焦点时，下拉框中只显示选定的数据，原来的都删掉了。当然也可以处理成body的onload时进行处理。大家随意了。如果有其他交互事件时还要允许选择下拉数据，那就事先通过一个数组或对象保存起来select的选项，使用时重新添加上(下面方法展示了多个select处理方式，要求num的值对每个select要唯一)
var selectObjChange=new Array;
var selectObjArray=new Array;
function selectFocus(obj,objValue,num){
if(selectObjArray[num]==null&&selectObjChange[num]==null){
selectObjChange[num]=num;
selectObjArray[num]=obj.options.cloneNode(true);
}
else{
obj.options.length = 0;
for(i=0;i obj.options.add(new Option(selectObjArray[num][i].text,selectObjArray[num][i].value));//动态添加原数据项

}
}
obj.value=objValue;
var objText = obj.options[obj.selectedIndex].text;
obj.options.length = 0;
obj.options.add(new Option(objText,objValue));//动态添加选中项
obj.blur();
}

用心看教程，专心学知识。