search

Home  >  Q&A  >  body text

javascript - 能不能点击下拉菜单<select>的时候,不要展开下拉菜单。

我想要的效果是点击下拉菜单<select>的时候,不要展开下拉菜单。

大家讲道理大家讲道理2902 days ago494

reply all(5)I'll reply

  • 巴扎黑

    巴扎黑2017-04-10 13:13:34

    你没有说清楚实现这个场景的目的,让人难以理解需求。

    如果单纯不让用户点击,方法有很多,你可以给他覆盖一层透明的, 也可以给他绑定点击事件,在事件中拦截默认动作,还可以用图片去代替这个下拉框,骗用户却不让他点。

    不管怎样,下拉框在那里却不能点挺让人不舒服的。
    select有个disable属性,也完全能够做到让你看,不让你点。

    另外在你问题的第一个评论中:

    Humphry · 5天前
    要说HTML4有什么原生表单组件最为难用,select首当其冲。
    个人推荐模拟的:http://aui.github.io/popupjs/doc/selectbox.html
    

    他说的内容其实是我更推荐的,这个模拟select库我问过作者,目前腾讯Qzone在产品环境中用这个库,我觉得值得信赖。

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 13:13:34

    猜测是编辑文章(估且这么认为)时不希望让用户修改分类吧。

    因为 select 没有 readonly 状态,所以你可以在判断为编辑文章时,在页面中放一个 input type=hidden,然后用文本显示出当前值。

    如果一定要添加一个 select 的话,可以这样。

    <select name="category" disabled>
        <option>1</option>
        <option>2</option>
    </select>
    <input type="hidden" name="category" />
    

    你也可以使用 select2,它能够模拟出下拉框的 readonly 状态。

    reply
    0
  • 阿神

    阿神2017-04-10 13:13:34

    select.on('click',function(e){e.preventdefault()});

    给个class="disabled"
    .disabled {pointer-events: none;}

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 13:13:34

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
    
    <select id="select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    
    <script>
    // 我相信用户是可以接受若干毫秒的闪烁。同时该组件又能保持change等一系列原属性
    $('#select').on('focus', function() {
      $(this).hide();
      setTimeout(function(this) {
        $(this).show();
      }.bind(this));
    });
    </script>
    </body>
    </html>

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-10 13:13:34

    设置一个width和height都和这个下拉框相同的透明p,覆盖在上面,为了显示出该select组件不能用,可将其opacity设置为0.6,IE下记得设置filter alpha

    reply
    0
  • Cancelreply