select标签 禁止选择但又能通过序列化form表单传值到后台

  前言

  项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化form获取到select标签的值;当我们使用readonly="readonly"发现,我们还是能展开下拉框并选择值,这时候我们应该怎么实现这个需求呢?

 

  代码实现

  方法一

  1、设置readonly="readonly",设置被禁用的页面效果

  2、设置οnmοusedοwn="return false;",设置禁止鼠标按下事件

<form id="form">
    <select id="select" name="select" class="form-control" readonly="readonly" onmousedown="return false;">
<
option value="">请选择</option>
<
option value="Y">Yes</option>
<
option value="N">No</option>
</
select> </form>

  效果:

  

  如何在js动态的添加与移除这个效果呢?

//js动态添加
$("#select").attr("readonly","readonly");
$("#select").attr("onmousedown","return false;");
//js动态移除
$("#select").removeAttr("readonly");
$("#select").removeAttr("onmousedown");

  为了页面更加好看,可以设置鼠标的禁用样式:cursor: not-allowed;

$("#select").css("cursor","not-allowed");
$("#select").css("cursor","");

        

 

 

  后记

  暂时先记录到这里,后续有空再继续更新

转载于:https://www.cnblogs.com/huanzi-qch/p/10308716.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值