设置select下拉框不可修改的→“四”←种方法

设置select下拉框为不可修改的几种方法：

因为select的特殊性，导致它不能像input表单一样简单地设置一个readonly来限制修改，所以，我们需要进行别的操作！

1、为下拉框添加样式，可以禁用该下拉框(效果和敲地板差不多)：

<select name="name" id="select" class="select" style="pointer-events: none;"></select>

2、为下拉框添加onfocus和onchange方法，可以禁用该下拉框（点击出来全部，但其他的就是不能选，诶~）：

<select name="name" id="select" class="select" οnfοcus="this.defaultIndex=this.selectedIndex;" οnchange="this.selectedIndex=this.defaultIndex;">

或者在js中

   	  	 
	var sel= document.getElementById('mySelect');
    sel.onchange=function(){
       	 this.selectedIndex=this.defaultIndex;
    };
	sel.onfocus=function(){
		this.defaultIndex=this.selectedIndex;
	};

3、可以在页面加载之前设置，将select设置为disabled，需要注意：disabled属性会使得值无法传递，所以需要在提交前取消disabled。（我虚了，你呢？）

$(function() {  $('#select').attr("disabled",true); }）；

或者

var sel= document.getElementById('mySelect');
sel.disabled="true";

需提交表单前设置

$('#select').attr("disabled",false);

或者

var sel= document.getElementById('mySelect');
sel.disabled="false";

4、使用js使select无法修改（实现方式是通过js把其他的选项一个一个清除）如下：（成功路上无对手！）

//获取select对象
var iElement= document.getElementById('mySelect');
//新建一个下拉框数组
var optionTags = new Array();
var index = 0;
var optionObj;
//拿到目前select应该展示的元素value
var elementValue = iElement.value;
var tag;
//拿到当前所有的option 放在options(数组)中
var options = iElement.options;
if(options.length>1){
    for(var j = options.length-1; j >= 0; j--){
        tag = new Array();
        optionObj=options[j];
        tag["value"] = optionObj.value;
        tag["text"]  = optionObj.text;
        optionTags[index++] = tag;
        //如果该元素不是当前展示的元素，则将该元素移除
        if(tag["value"] != elementValue){
            iElement.remove(j);
        }
    }
}
//最后的select只剩一个元素，也就达到了效果

以上，希望能够帮到你！