將選中的下拉選單值寫入文字框

螞蟻小編發表於2017-04-14

本章節分享一段簡單的程式碼例項，它實現了將選中的下拉選單內容寫入文字框的效果。

不過這裡的下拉選單和文字框都是模擬的，實際上並不是。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
html, body {
  width: 100%;
  height: 100%;
}
.hide {
  display: none;
}
.div-select {
  width: 400px;
  font-size: 14px;
  color: #333;
}
.div-input {
  width: 400px;
  top: 200px;
  padding-left: 10px;
  border: 1px solid #dbdbdb;
  height: 30px;
  line-height: 30px;
}
.div-input:hover {
  cursor: pointer;
}
.div-input span:hover {
  cursor: default;
}
.div-select .div-ul {
  width: 400px;
  display: none;
}
.div-select .div-ul div {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  border: 1px solid #dbdbdb;
  width: 100%;
  border-top: none;
}
.div-select .div-ul div:hover {
  background: #cf9;
  color: #fff;
}
.div-select span {
  padding: 5px 10px;
  background: #9cf;
  color: #fff;
  font-size: 14px;
  margin-right: 5px;
}
.div-select span .fa {
  font-size: 14px;
  color: #fff;
  position: relative;
  left: 3px;
}
.div-select span .fa:hover {
  cursor: pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
(function($) {
  $.fn.targesInput = function(options) {
    var defaults = {};
    var opts = $.extend({}, defaults, options);
    var Methods = {
      init: function(_this) {
        divInput = _this.find(".div-input");
        divUl = _this.find(".div-ul");
        divUlDiv = divUl.find("div");
        divInputSpan = divInput.find("san");
        body = _this.closest("body");
        arr = [];
        if (divInput.find("span").get(0)) {
          divInput.find("span").each(function() {
            arr.push($(this).text());
          })
        }
        Methods.divInputClick();
        Methods.divUlDivClick();
        Methods.divInputSpanClickRemove();
        Methods._thisClick(_this);
        Methods.bodyClick();
        Methods.divInputSpanClick()
      },
      divInputClick: function() {
        divInput.on("click", function() {
          if (divUl.is(':hidden')) {
            divUl.slideDown(200);
          }
        })
      },
      divUlDivClick: function() {
        divUlDiv.on("click", function() {
          if ($.inArray($(this).text(), arr) < 0) {
            arr.push($(this).text());
          }
          var str = ' ';
          for (var i = 0; i < arr.length; i++) {
            str += '<span>' + arr[i] + '<i class="fa fa-remove"></i></span>';
          }
          str += ' ';
          divInput.html(str);
          divUl.slideUp(200);
        });
      },
      divInputSpanClickRemove: function() {
        divInput.delegate(".fa-remove", "click", function(e) {
          e.stopPropagation();
          arr.splice($(this).parent("span").index(), 1);
          $(this).parent("span").remove();
        });
      },
      _thisClick: function(_this) {
        _this.on("click", function(e) {
          e.stopPropagation();
        })
      },
      divInputSpanClick: function() {
        divInput.delegate("span", "click", function(e) {
          e.stopPropagation();
        });
      },
      bodyClick: function() {
        body.on("click", function() {
          if (!divUl.is(':hidden')) {
            divUl.slideUp(200);
          }
        })
      }
    };
    Methods.init($(this))
  };
})(jQuery);
$(document).ready(function () {
  $(".div-select").targesInput({})
})
</script>
</head>
<body>
<div class="div-select">
  <div class="div-input">
    <span>div教程<i class="fa fa-remove"></i></span>
    <span>css教程<i class="fa fa-remove"></i></span>
  </div>
  <div class="div-ul">
    <div>js教程</div>
    <div>json教程</div>
    <div>ajax教程</div>
    <div>jquery教程</div>
  </div>
</div>
</body>
</html>

相關文章