`
imacheer
  • 浏览: 978 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

把下拉框设为只读

 
阅读更多
文章链接:http://ltf1660.iteye.com/blog/580699
在项目开发过程中我们时常会碰到要设置下拉框为只读(readonly),但是可惜的是select没有只读属性,所以需要在select外面包含一个span,通过js来改变。

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

<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");
  }

做到这里大功告成,试试效果吧!!!
分享到:
评论

相关推荐

    浅谈html中input只读属性readonly和disable的区别

    因此,`disabled`常用于禁止用户修改或提交特定数据的场景,例如在用户提交表单后等待管理员验证期间,整个表单或部分表单元素应设为`disabled`,确保用户无法再次更改数据。 在JavaScript中处理表单交互时,`...

    layui select 禁止点击的实现方法

    接着,通过`form.render('select', '#mySelect', {disabled: true})`方法,我们将指定的select元素设为禁用状态。如果需要对多个select进行操作,可以使用类选择器`.mySelectClass`,然后通过`form.render`方法进行...

    设置disabled属性后台读不到数据如何让select支持readonly

    当用户提交表单时,你可以临时将`disabled`设置为`false`,允许数据提交。这可以通过监听表单的提交事件来实现: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; $(document)....

    DataGridView单元格实现下拉和编辑功能设置代码

    // 设置ComboBox为只读模式 cmb_Temp.DropDownStyle = ComboBoxStyle.DropDownList; } ``` 这段代码创建了一个`DataTable`实例,用于存储下拉列表的数据。接着添加了两行数据:“int”和“char(50)”。最后设置了...

    第三方控件(DevExpress)使用大全【个人开发过程中整理收集】

    - 只读模式:为了禁止编辑行,可以设置View的OptionsBehavior.EditorShowMode为Click,并将OptionsBehavior.Editable设为false,这样用户只能选择行,不能编辑。 - 禁用列右键菜单:若想禁用点击列头弹出的右键...

    DBGrid 单行修改、单列修改、选中一行但可编辑

    如果一个TField的ReadOnly属性设为True,那么对应的DBGrid单元格将变为只读。反之,如果设为False,用户就可以在单元格中输入数据。 6. **朱建强与Delphi编程**:标签中提到的“朱建强”可能是作者或某个知名Delphi...

    DEVExpress使用大全

    - **只读模式**:如果希望行只能被选择而不能编辑,可设置View-&gt;OptionsBehavior-&gt;EditorShowMode为Click,并将View-&gt;OptionsBehavior-&gt;Editable设为false,这样用户无法编辑单元格内容。 - **禁用列头右键菜单**...

    第三方控件(DevExpress)使用大全【个人开发过程中整理收集】.

    - 要使ComboBoxEdit变为只读,你可以将`TextEditStyle`属性设置为`DisableTextEditor`,这样用户就不能直接编辑文本。 - 若要改变鼠标指针形状,可以设置`Cursor`属性为`Hand`,模拟点击链接的效果。 2. **...

    WindowsXP操作系统上机操作题借鉴.pdf

    4. 设置回收站属性:右键点击桌面的“回收站”图标,选择“属性”,在“设置”选项卡中选择“所有驱动器使用相同设置”,并将最大百分比设为5%。 5. 更改文件查看方式和排序:在资源管理器中,选择“查看”菜单,将...

    VC控件使用指南

    3. **修改按钮标题**:“确定”按钮保持不变,而另一个按钮标题设为“浏览...”。 4. **设置按钮ID**:为“浏览...”按钮设置ID为`ID_BROWSER`。 每个控件都有唯一的ID,用于标识控件。一些特定的ID,如`IDOK`和`...

    Ant design vue 的组件禁用属性 disabled.pdf

    2. **表单验证**:在表单提交前,如果某些字段的验证未通过,可以将这些字段的`disabled`属性设为`true`,防止用户在未完成必要输入时提交表单。 3. **响应式设计**:根据不同的设备或屏幕尺寸,可能需要动态地禁用...

    \VSFlexGrid 控件属性方法一览表

    4. **AllowBigSelection**: 如果设为 `True`,用户可以选中一整行或一整列。`O.AllowBigSelection = True` 允许这种操作。 5. **AllowSelection**: 设置用户是否可以选取多个单元格。`O.AllowSelection = False` 将...

    2022年职称计算机考试WindowsXP操作题一.docx

    12. 设置默认打印机:从“开始”菜单,选择“控制面板”,然后找到“打印机和传真”,右键点击打印机 EpsonEPL-3000,选择“设为默认打印机”,再设置“脱机使用”。 13. 显示任务栏上的时钟:在任务栏右键,选择...

    My97DatePicker详解

    - **只读开关**:设置`readOnly`属性为`true`或`false`,控制日期框是否只读。 - **高亮周末**:通过`highLineWeekDay`属性设置是否高亮显示周末。 - **操作按钮自定义**:`isShowClear`和`isShowToday`分别控制...

    JS之小练习代码

    布局设为"form",意味着窗口内部的元素将按照表单的形式排列。`defaults`属性设置了所有组件的默认锚点大小,即占据容器的95%宽度。 窗口内部包含了三个主要的布局区域:两个列布局(column layout)和一个普通的...

Global site tag (gtag.js) - Google Analytics