`
西北小强
  • 浏览: 345035 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

禁用select下拉选的小方法

禁用select让select选中值不能修改 
阅读更多

  今天看到一大神处理下select下拉选的一段代码，在次做个笔记。这段代码主要用于禁用select标签，让其选中的值不能被改变。好了，不瞎扯了，看代码吧。

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>RunJS</title>
		<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
	</head>
	<body>
		
      <select id="statusprice">
	<option value="0">待定价</option>
	<option value="1" selected>已定价</option>
</select>
 
    </button>
	</body>
</html>
$(function(){
//方法1：参考大神的代码
   $("#statusprice").focus(function(){
	  	this.si=this.selectedIndex;
	  });
	   $("#statusprice").change(function(){
	  	this.selectedIndex=this.si;
	  });
//方法2：比较通俗的方法，直接禁用select标签，让其至灰
   $("#statusprice").attr("disabled",true); 
	
});

 该代码运行后的结果是：让select一直保持选中“已定价”状态，不能选中其他选项。

 

分享到：
| struts2中异常处理（demo）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    select下拉菜单美化.rar

    本资源"select下拉菜单美化.rar"可能包含了一套用于改善默认select菜单外观的JavaScript库或者CSS样式集，旨在提供更加美观、交互性更强的下拉选择体验。 通常，这种美化方法会涉及到以下几个关键知识点： 1. **...

    select下拉选择不同状态

    本文将深入探讨如何实现一个“select下拉选择不同状态”的功能，这通常用于提供更丰富的用户体验，例如根据不同的选项状态展示不同的颜色。 标题中的“select下拉选择不同状态”指的是在HTML的`&lt;select&gt;`元素中，每...

    解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...

    带select下拉特效

    这个"带select下拉特效"可能包括以下特性： 1. **视觉样式**：自定义的背景颜色、边框、圆角、阴影等，使其与网站的整体设计保持一致。 2. **动画效果**：打开和关闭下拉菜单时的过渡动画，增加用户体验的流畅感。 ...

    select2 省市区 级联 下拉菜单

    6. **禁用未激活的下拉**：为了防止用户在级联完成前做出无效选择，可以将未激活的下拉菜单设为禁用状态。当某个选择发生时，才启用相应的下拉菜单。 通过以上步骤，你可以成功实现一个基于select2的全国省市区三级...

    非常简单的下拉复选框

    下拉复选框是一种常见的表单组件，它将传统的复选框与下拉菜单结合，节省空间的同时提供了更多的选项选择。本文将深入探讨一种名为“非常简单的下拉复选框”的JavaScript插件，该插件旨在简化开发过程，提高用户界面...

    HTML Select 下拉菜单功能扩展

    在基础的HTML中，`&lt;select&gt;`标签创建一个下拉列表，每个可选的条目通过`&lt;option&gt;`标签定义。例如： ```html &lt;select&gt; &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;Option 2 ...

    Layui 动态禁止select下拉的例子

    如果值不等于1，表示我们希望禁用`select`下拉： ```javascript function disSelect() { var level = $('#is_level1').val(); if (level != 1) { layer.msg('一级分类父级不可修改'); // 提示用户不能修改 $('...

    jQuery Select 下拉单选框模拟插件

    本文将深入探讨“jQuery Select 下拉单选框模拟插件”，这是一个旨在改进下拉选择框用户体验的工具。 传统的HTML `&lt;select&gt;`元素在功能上可能显得单一且不够用户友好。为了提供更丰富的交互性和视觉效果，开发人员...

    AmazeUI 下拉选框

    要禁用下拉选框，只需在`&lt;select&gt;`标签上添加`disabled`属性，如： ```html &lt;select class="am-form-field" disabled&gt; &lt;!-- ... --&gt; &lt;/select&gt; ``` 4. **下拉选项分组** 使用`&lt;optgroup&gt;`标签可以对选项进行...

    jquery下拉菜单插件SelectMenu

    `SelectMenu.js` 提供了一些可选参数和方法，用于自定义行为和获取用户选择。例如，可以设置默认选中项，禁用特定选项，或者监听选中事件： ```javascript // 设置默认选中项 $('select').selectmenu({selected: 2}...

    学习用CSS3技术自定义Select下拉表单.rar

    总的来说，使用CSS3技术自定义Select下拉表单是一个提升网页交互体验的重要技巧，它需要对CSS3的新特性有深入的理解和熟练的运用。通过学习和实践，开发者不仅可以创建出符合网站风格的下拉菜单，还能提高网页的视觉...

    javascript html js 自定义多级联动下拉菜单,自定义select联动

    `&lt;select&gt;`元素用于创建一个下拉列表，而`&lt;option&gt;`元素则用于定义下拉列表中的选项。联动下拉菜单的基本原理是，当用户在一个下拉菜单中选择一个选项时，另一个下拉菜单的选项会根据前者的选中值动态更新。 1. **...

    bootstrap下拉多选框

    在Bootstrap中，下拉多选框是实现用户界面交互时常见的一种元素，尤其在数据筛选、选项选择等场景下非常实用。Bootstrap本身并没有内置专门的多选下拉框组件，但通过扩展或第三方插件，我们可以轻松地实现这一功能。...

    下拉框、下拉控件之Select2内含css和js

    **下拉框与下拉控件：Select2详解** 在网页设计中，下拉框（Dropdown）是一种常见的用户界面元素，用于提供多个选项供用户选择。然而，原生的HTML `&lt;select&gt;` 标签功能相对有限，样式单一，无法满足现代网页设计的...

    html option禁用选择 select禁用选项示例

    这样，用户在下拉列表中看不到3、4、5这三个选项，因为它们被隐藏在了不可选的组里。 值得注意的是，`&lt;option&gt;`和`&lt;optgroup&gt;`元素的`value`属性通常用于传递选定选项的值到服务器，但在这个例子中，所有的`value`...

    jquery下拉列表插件

    8. **API控制**：开发者可以通过调用插件提供的API方法来动态改变下拉列表的状态，例如`selectBox('refresh')`刷新列表，`selectBox('disable')`禁用插件等。 在实际应用中，`selectBox`插件通常与HTML结构配合使用...

    div模拟select下拉菜单美化效果实例

    在网页设计中，为了提供更好的用户体验和更符合品牌风格的界面，开发者经常会选择用`div`元素来模拟`select`下拉菜单的样式。`select`元素是HTML中内置的表单控件，用于创建下拉列表，但其样式控制有限，难以实现...

    React-reactselectReactJS的一个下拉选择控件

    2. **高度可定制**：react-select提供了许多可配置的选项，比如改变样式、设置选项分组、添加清除按钮、禁用选项等。这使得开发者可以根据项目需求定制组件的外观和行为。 3. **实时搜索**：对于大型选项列表，...

Magicbox
Global site tag (gtag.js) - Google Analytics