js使select标签option为不可选

最新推荐文章于 2022-07-25 16:57:24 发布
最新推荐文章于 2022-07-25 16:57:24 发布
阅读量3.2k 收藏
点赞数
分类专栏： js 文章标签： JavaScript IE CSS HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianye_uu/article/details/83769784
版权

实现select标签的部分option为不可选有两种方法:

1. 使用optgroup标签及其label属性.兼容于IE,FF.例子如下:
   <style type="text/css" media="all">
option.readOnly {background:#ccc;color:#666;}
</style>
<select οnchange="if(this.options[selectedIndex].className=='readOnly') this.selectedIndex = -1">
<option value="===" class="readOnly">只读的 </option>
<option value="xxx" selected>可选的 </option> okjjnipujo
<option value="xxx">可选的 </option>
<option value="===" class="readOnly">只读的 </option>
<option value="xxx">可选的 </option>
<option value="xxx">可选的 </option>
<option value="===" class="readOnly">只读的 </option>
<option value="xxx">可选的 </option>
<option value="===" class="readOnly">只读的 </option>
<option value="xxx">可选的 </option>
<option value="xxx">可选的 </option>
<option value="===" class="readOnly">只读的 </option>
<option value="xxx">可选的 </option>
</select>
<select  name= "test ">
<optgroup  label="&nbsp;"  ></optgroup>
<option> 北京奔驰—戴克 </option>
<option> 北京现代 </option>
<optgroup label="&nbsp;" ></optgroup>
<option > 长安汽车 </option>
<option selected="selected"> 长安铃木 </option>
</select>

2.使用js进行监听方法.选择了不可选option时将它替换为原来的那个option.例子如下:
  /****************************************************************
* Author:    Alistair Lattimore
* Website:    http://www.lattimore.id.au/
* Contact:    http://www.lattimore.id.au/contact/
*            Errors, suggestions or comments
* Date:        30 June 2005
* Version:    1.0
* Purpose:    Emulate the disabled attributte for the <option>
*            element in Internet Explorer.
* Use:        You are free to use this script in non-commercial
*            applications. You are however required to leave
*            this comment at the top of this file.
*
*            I'd love an email if you find a use for it on your
*            site, though not required.
****************************************************************/

window.onload = function() {
    if (document.getElementsByTagName) {
        var s = document.getElementsByTagName("select");

        if (s.length > 0) {
            window.select_current = new Array();

            for (var i=0, select; select = s[i]; i++) {
                select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; alert(" this.id= "+this.id+" this.selectedIndex= "+this.selectedIndex); }
                select.onchange = function(){ restore(this); }
                emulate(select);
                alert("i=  "+i+" select= "+select.value);
            }
        }
    }
}

function restore(e) {
    if (e.options[e.selectedIndex].disabled) {
        e.selectedIndex = window.select_current[e.id];
        alert(e.selectedIndex+" "+e.id);
    }
}

function emulate(e) {
    for (var i=0, option; option = e.options[i]; i++) {
        if (option.disabled) {
            option.style.color = "graytext";
        }
        else {
            option.style.color = "menutext";
        }
    }
}

===
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0089)http://www.lattimore.id.au/files/examples/form-select-option-disabled-attr-js-simple.html -->
<HTML><HEAD><TITLE>form select option disabled simple, using javascript emulation</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><!--[if lt IE 7]>
<SCRIPT
src="form select option disabled simple, using javascript emulation.files/select-option-disabled-emulation.js"
type=text/javascript></SCRIPT>
<![endif]-->
<SCRIPT
src="form select option disabled simple, using javascript emulation.files/select-option-disabled-emulation.js"
type=text/javascript></SCRIPT>

<META content="MSHTML 6.00.2900.3354" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=5 cellPadding=3>
  <TBODY>
  <TR>
    <TD>
     <FORM action=# method=post>
      <SELECT id=dropdown_car name=dropdown_car>
        <OPTION value=ferrari selected>Ferrari</OPTION>
        <OPTION value=ford>Ford</OPTION>
        <OPTION disabled value=holden>Holden</OPTION>
        <OPTION disabled value=mitsubishi>Mitsubishi</OPTION>
        <OPTION value=porsche>Porsche</OPTION>
        <OPTION disabled value=toyota>Toyota</OPTION>
      </SELECT>
      <INPUT type=submit value=Submit>
      </FORM>
      </TD>
    <TD>
    
      <FORM action=# method=post>
        <SELECT id=dropdown_animal name=dropdown_animal>
          <OPTION value=cat selected>Cat</OPTION>
          <OPTION disabled value=snake>Snake</OPTION>
          <OPTION disabled value=spider>Spider</OPTION>
          <OPTION value=dog>Dog</OPTION>
        </SELECT>
      <INPUT type=submit value=Submit>
      </FORM>
      </TD></TR></TBODY></TABLE>
<P>This page has standard dropdown lists, which are emulated when the page is
initially rendered.</P></BODY></HTML>

tianye_uu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-select-option:为 HTML 表单上的 Select 选项收集更易于样式化的替代品，因为默认的替代品真的很烦人！
06-29
HTML 选择选项 目的是让一些非常好的、响应式/跨浏览器/其他流行语准备好选择表单元素放入需要一些样式的网络表单中（因此我们不必与默认值作斗争）。 在开始设置下拉列表（或其他表单元素）样式之前，先浏览一下。 如果你可以避免它并且只使用默认值 - 做！ React灵敏 最小尺寸 解决方案* 默认 是的 0 不适用 选择 是的 56kb 替代品 选择2 是的 ? 替代品 CoDrops 是的 ? 替代品 CoDrops2 ? ? 风俗 重置 是的？ ? 原来的 解决方案* 原文：使用纯 CSS 更改默认值 替换：创建自己的 HTML 以简化样式，通常保留原始的 select 元素以实现可访问性 自定义：您必须编写/复制原始 HTML，它不涉及默认选择 ####Desktop 浏览器支持的 IE11 IE8 Chrome(40) IE9 火狐(34) 默
【HTML】select option只读不能选择
qq_45849224的博客
05-31 1981
select option只读不能选择。 例如 <select> <option>请选择</option> <option>A</option> <option>B</option> </select> 实际效果都能选择。 解决方案 在option 里加入 disabled即可 <select>
html option禁用选择 select禁用选项示例
12-14
复制代码代码如下: <select> <option value=””>1</option> <option value=””>2</option> <option value=””>3</option> <option value=””>4</option> <option value=””>5</option> </select>   我不想让用户可以选择 345 怎么办呢 复制代码代码如下: <select> <option value=””>1</option> <option value=””>2</option> <optgroup label=”3″></optgroup>
Layui 动态禁止select下拉的例子
12-10
author：咔咔 wechat：fangkangfk 前端代码 js代码 // 禁止select点击 function disSelect() { var level = $('#is_level1').val(); if(level != 1){ layer.msg('一级分类父级不可修改'); $('select').attr('disabled', 'disabled'); form.render('select'); } } // 禁止select点击 disSelect(); 以上这篇Layui 动态禁止selec
打造个性化的Select(可编辑)
12-11
由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select. 功能:   1.可编辑的Select   2.长度可以随意修改   3.可以遮盖系统Select   4.支持forms    5.支持CSS修改外观   6.修正在IE 5.0上运行出错的问题   7.支持使用js脚本 使用方法 [b]var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)[/b] [b]实体化变量.add(option数值,JS脚本)[/b] 这只是一个测试版,很多功能没有完善,比如没有区分value和caption等等,希望大家提出宝贵意
设置select下拉框不能选择
xiaozhixians的博客
12-01 4923
只能查看不能选取设置 当属性设置为disabled时，提交时，select的值无法传递，提交前移除disabled属性 disabled 设置为“false”时为禁用 <div class="span3"> <label class="label_note">公司性质:</label> <select id="baseCompanyType" name="baseCompanyType" style="width:80%
学习如何使用javascript/jquery设置select只读不可用的属性值
徊忆羽菲
12-16 3119
学习如何使用javascript/jquery设置select只读不可用的属性值js控制select不可用## jquery控制select不可用js控制select可用## jquery控制select可用 js控制select不可用 <select name="qipa250" id="qipa250"> <option value="1">奇葩</option> <option value="2">奇葩天地网</op
css、js实现网页内容禁止选中
热门推荐
李豆豆的博客
04-15 1万+
网页内容不能选中、复制应该如何实现呢？ 通过css *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none...
select 下拉框某一项设置为不可选
这不是我的博客
07-25 1493
select 下拉框某一项设置为不可选
设置select菜单禁止选择或选择无效
Alone_in_的博客
12-04 7110
一、disabled属性 在select上设置disabled="disabled"，即可将下拉菜单变为只读状态，不可选择，点击也无效。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//...
两个select之间option的互相添加操作(jquery实现)
12-09
自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现. 插件源代码(listtolist.js): 代码如下:/** fromid:源list的id. toid:目标list的id. moveOrAppend参数(“move”或者是”append”): move — 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加. append — 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加. isAll参数
基于jquery实现select选择框内容左右移动添加删除代码分享
11-24
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！ 运行效果图：                                  ———————-查看效果———————– 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的代码如下 <head> <meta http-equiv="Content-Type" con
new Option 的参数问题
蛰伏神兽的专栏
05-01 4750
写二级联动菜单时，js里一般要用到New Option()，而且一般都是里面呆两个参数，第一个是显示的文本，第二个是value值。之前做的二级联动的时候，在“修改文章”的操作时，一般都是把二级类别以文字的方式显示出来，然后在二级联动后面写一句提示“不改请不要动”了事，没有细细追究过究竟要怎么解决。昨天做的一个活，要求可能选类别，也可能不选类别，如果添加时选了某一类，而修改时希望不选类别，那么我之前
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）...
弘毅
12-14 255
Javascript 操作select是表单中常见的一种，今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再删除索引小的，否则删除了索引小的后索引大的索引就变化了，再删除时就会出现问题－－问题的关键是for循环是要从大到小，而不是常规的从0到length） // 4.删除select中选中的项 function jsRemo...
js 使select不可点击
qq_39882553的博客
11-30 1167
$("#AuditStatus").attr("disabled","disabled");
设置select下拉框不可修改的→“四”←种方法
了迹奇有没
08-31 1万+
设置select下拉框为不可修改的几种方法： 因为select的特殊性，导致它不能像input表单一样简单地设置一个readonly来限制修改，所以，我们需要进行别的操作！ 1.为下拉框添加样式，可以禁用该下拉框(效果和敲地板差不多)： <select name="name" id="select" class="select" style="pointer-events: none;"></select> 2.为下拉框添加onfocus和onchange方法，可以禁用该下拉框
在select 的中设置不可选中的option，用于分类
nevEr leAve
05-26 1984
无标题文档 addidas nick mysql java
基于VB实现的商场管理系统设计(源代码+系统).zip
最新发布
05-04
【作品名称】：基于VB实现的商场管理系统设计(源代码+系统) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
js JavaScript select option 中的某个变成不可选
06-02
要将 select 中的某个 option 变成不可选，可以使用以下代码： ```javascript document.getElementById("mySelect").options[index].disabled = true; ``` 其中，`mySelect` 是要操作的 select 的 id，`index` 是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值