如何将select下拉框设置成readonly

2025-09-28 14:53:53

1、关于如何在项目中引入EasyUI前端框架,可以参考如下经验

6Spring Web项目如何集成EasyUI进行前端开发

如何将select下拉框设置成readonly

2、引入EasyUI框架后,可以在select元素中添加readonly属性

如何将select下拉框设置成readonly

3、打开前台页面,可以看到设置了readonly属性后,select下拉框变得不可选择了,查看对应元素属性,可以看到加上了readonly

如何将select下拉框设置成readonly

1、假如对下面的select作处理为例,可见select的id为country

如何将select下拉框设置成readonly

2、在页面上添加如下js代码:

window.onload = function () {

var sel = document.getElementById("country");

sel.onfocus = function () {

      this.defaultIndex = this.selectedIndex;

}

sel.onchange = function () {

     this.selectedIndex = this.defaultIndex;

}

}

表明select中的显示值不会变更,但是下拉框是可以展开,只是不能作变更了,类似于readonly属性了

如何将select下拉框设置成readonly

如何将select下拉框设置成readonly

1、给select添加disabled属性

如何将select下拉框设置成readonly

如何将select下拉框设置成readonly

2、由于设置了disabled属性,在提交表单时将获取不到此元素的值,所以在提交表单时可以添加如下代码临时解除disabled,其中函数procArray()中执行了具体的ajax请求,在procArray执行完成了再次将id为country的select属性还原为disabled。

  function submitForm() {

        $("#country").attr("disabled",false);

        procArray();

        $("#country").attr("disabled",true);

    }

如何将select下拉框设置成readonly

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢