用jQuery创建一个可编辑的SELECT下拉控件(HTML/CSS)

最新推荐文章于 2022-10-02 08:06:13 发布

lyg1153

最新推荐文章于 2022-10-02 08:06:13 发布

阅读量389

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

普通的SELECT控件只能选择，不能编辑，这里可以用JS代码来实现这个功能。基本原理是在select控件上面添加一个input盖住，当select改变时自动更新input的值。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="author" content="">
</head>
<body>
<style>

.select-editor {
    position: relative;
    height: 20px;
    overflow: hidden;
    border: solid 1px #ccc;
}

.select-editor select {
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    width: 100%;
    margin: 0;
}

.select-editor input {
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    width: 90%;
}

.select-editor select:focus,
.select-editor input:focus {
    outline:none;
}

.select-editor[disabled] input {
    background-color: rgb(235, 235, 228);
}
</style>
  
<div class="select-editor">
  <select>
    <option value="OPTION 1">OPTION 1</option>
    <option value="OPTION 2">OPTION 2</option>
    <option value="OPTION 3">OPTION 3</option>
    <option value="OPTION 4">OPTION 4</option>
  </select>
  <input type="text" name="host" value="" />
</div>

<script src="/js/jquery-1.12.4.min.js"></script>
<script>
$.fn.selectEditor = function() {
  return this.each(function() {
    var self      = this
    var $editor   = $(self)
    var $select   = $editor.find('select')
    var $input    = $editor.find('input')

    if ($input.size() < 1 || $select.size() < 1) {
      return
    }

    $select.on('change', function() {
      var self    = this
      var option  = self.options[self.selectedIndex]
      if (!option) {
        return
      }

      $input.val(option.value)
    })
  })
}

$('.select-editor').selectEditor()
</script>
  
</body>
</html>