设置只读

by admin on 2019年9月2日

在项目开发过程中我们时常会碰到要设置下拉框为只读(readonly),但是可惜的是select没有只读属性,所以需要在select外面包含一个span,通过js来改变。

// 设置只读
function SetReadOnly(jObj) {
    if (jObj.children().length > 0) {
        jObj.find("input,textarea").each(function () {
            var that = $(this);
            that.prop("readonly", true)
            .css("background-color", "#EBEBE4");
            if (that.hasClass("datepicker")) {
                that.datepicker("destroy")
            }
        })
        jObj.find("select").each(function () {
            $(this).bind("focus", function (e) {
                this.defaultIndex = this.selectedIndex;
            })
            .bind("change", function (e) {
                this.selectedIndex = this.defaultIndex;
                e.preventDefault();
            })
           .css("background-color", "#EBEBE4")
           .attr("readonly", "readonly");
        });
    } else {
        jObj.prop("readonly", true)
            .css("background-color", "#EBEBE4");
    }
}
<select id="select_table">
          <option value ="-1">==全部分类==</option>
          <option value ="0">工作案例</option>
          <option value="1">微党课</option>
          <option value="2">教师党支部推荐展示</option>
          <option value="3">学生党支部推荐展示</option>
</select>

$(function(){
            $("#select_table").change(function(){
                var typeCodePre =  $("#select_table").val();

设置下拉框的值用el表达式,还是js
数据库查询,有省份,要把省份显示在下拉框中
1.用c:if ${province==n} selected:selected
2.var province = ${province}

下面这段html代码是在struts2的下拉标签中加入了span标签,在页面装载的时候就让下拉框变成不可读。

 

$(“#province”).val;

复制代码 代码如下:

方法1看起来比较简洁,但每个option加个c:if 会不会变慢
方法2把el表达式的值赋给js,然后再用js控制页面,el表达式还有可能是空值
且不美观,要用那种方法呢?

<body onload=”init()”>
<span id=”id_select”>
<s:select name=”sjdwmc” list=”sjdxdwList” listKey=”dxbh”
listValue=”dwmc” headerKey=”” headerValue=””></s:select>
</span>
</body>

如下是js代码,在init方法中调用selectReadOnly让下拉框变成只读。

复制代码 代码如下:

/*根据页面上span的id设置select为只读/

function selectReadOnly(selectedId){
var obj = document.getElementById(selectedId);
obj.onmouseover = function(){
obj.setCapture();
}
obj.onmouseout = function(){
obj.releaseCapture();
}
obj.onfocus = function(){
obj.blur();
}
obj.onbeforeactivate = function(){
return false;
}
}

function init(){
selectReadOnly(“id_select”);
}

做到这里大功告成,试试效果吧!!!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图