多個下拉去重，jQuery實現

先看一下效果：

線上地址

其實實現很簡單，本人採用jQuery操作demo方式，語法es6，這種方式沒有vue.js和angular等基於資料的方式簡單，下次有時間再提供。

//先看一下js部分
class selector{
    constructor (list){
      this.selectMap = []
      this.selectArr = []
      for(let i in list){
        this.selectMap.push({index:i,text:list[i].text,isSelect:false})
      }
      this.selectArr.push({selectIndex:list[0].index,value:0})
      this.selectMap[0].isSelect = true
      this.initHtml()
      this.initMoneyTotal()
    }
    initHtml(){
      let html = ''
      html += '<ul class="selectpicker list-group"></ul><button class="addSelect btn btn-default">+</button><p class="total"></p>'
      $(".autoSelect").html(html)
    }
    initMoneyTotal() {
      let all = ""
      $.each(this.selectArr,(i,j) => {
        let html = ""
        let option = ""
        $.each(this.selectMap, function (index, obj) {
          if(obj.isSelect && obj.index == j.selectIndex){
            option += '<option data="'+obj.index+'" selected="selected" value="' + obj.text + '">' + obj.text + '</option>'
          }
          if(!obj.isSelect){
            option += '<option data="'+obj.index+'" value="' + obj.text + '">' + obj.text + '</option>'
          }
        })
        html += '<li id="'+i+'" class="list-group-item"><select data1="'+j.selectIndex+'" data="'+j.selectIndex+'" class="selectItem form-control" name="earnestRentPeriod">'
          + option +
          +'</select>' +
          '<div style="width:342px">' +
          '<input name="consultEarnestPrice" type="number" data="'+j.selectIndex+'" value="'+parseInt(j.value)+'" class="inputVal form-control" placeholder="請輸入金額">'+
          '<button class="reduce btn btn-default" index="'+j.selectIndex+'">-</button>' +
          '</div></li>'
        all += html
      })
      $('.selectpicker').html(all)
      const _self = this;
      $('.reduce').click(function(){
        const self = this;
        _self.reduce(self)
      })

      $(".selectItem").change(() => {
        const self = this;
        this.changeSelect(self)
      })

      $(".inputVal").keyup(() => {
        this.changeInput()
      })

      $('.addSelect').click( () => {
        this.add()
      })
    }
    getTotal(){
      let total = 0;
      $.each(this.selectArr,function(i,j){
        total += j.value
      })
      $(".total").text('總和：' + total)
    }

    changeSelect(index) {
      var oldSelect = parseInt($(index).attr("data"))
      var data1 =  parseInt($(index).attr("data1"))
      var nowIndex = parseInt($(index).find('option:selected').attr("data"))

      $.each(this.selectMap,function(i,j){
        if(data1 == j.selectIndex){
          j.selectIndex = nowIndex
        }
      })

      $.each(this.selectMap,function (index,obj) {
        if(obj.index == nowIndex){
          obj.isSelect = true;
        }
        if(obj.index == oldSelect){
          obj.isSelect = false
        }
      })
      this.initMoneyTotal()
    }
    add() {
      if(this.selectArr.length == this.selectMap.length){
        return
      }
      for(let i in this.selectMap){
        if(!this.selectMap[i].isSelect){
          this.selectMap[i].isSelect = true;
          this.selectArr.push({selectIndex:this.selectMap[i].index,value:0})
          break
        }
      }
      this.initMoneyTotal()
    }
    reduce(ele) {
      if(this.selectArr.length == 1){
        return
      }
      var index = parseInt($(ele).attr('index'))
      $.each(this.selectArr,(j,obj) => {
        if(obj.selectIndex == index){
          this.selectArr.splice(j,1)
          return false
        }
      })

      $.each(this.selectMap,function (i,obj) {
        if(obj.index == index){
          obj.isSelect = false;
        }
      })
      this.initMoneyTotal()
      this.getTotal()
    }
    changeInput() {
      var val = ""
      var index = ""
      var self = this;
      $(".inputVal").each(function(){
        index = parseInt($(this).attr("data"))
        val = parseInt($(this).val())
        $.each(self.selectArr,function(i,j){
          if(index == j.selectIndex){
            j.value = val
          }
        })
      })
      this.getTotal()
    }
  }
複製程式碼

程式碼中構造了2個陣列 this.selectMap = [] this.selectArr = [] selectMap用來儲存使用者需要的一個列表，通過isSelect屬性判斷是否選中。selectArr 用來儲存已經選中的選項，通過熟悉selectIndex和selectMap的index熟悉關聯，value資料儲存了，後面input框的值。 整個操作過程就是處理這2個陣列，來動態拼接demo。 最後貼一下完整的程式碼。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>my-project</title>
  <script src="./js/jquery.js"></script>
  <style>
    *{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    .list-group {
      padding-left: 0;
      margin-bottom: 20px;
      width: 400px;
    }
    .list-group-item:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .list-group-item {
      position: relative;
      display: block;
      padding: 1px 15px;
      margin-bottom: -1px;
      background-color: #fff;
      border: 1px solid #ddd;
    }
    .list-group-item:last-child {
      margin-bottom: 0;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    .form-control{
      display: inline-block;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    input{
      margin: 0 10px;
    }
    .btn{
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
    }
    .btn-default{
      color: #333;
      background-color: #fff;
      border-color: #ccc;
    }
    .btn-default:hover {
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
  </style>
</head>
<body>
<div class="autoSelect">

</div>
</body>
<script type="text/javascript">

  class selector{
    constructor (list){
      this.selectMap = []
      this.selectArr = []
      for(let i in list){
        this.selectMap.push({index:i,text:list[i].text,isSelect:false})
      }
      this.selectArr.push({selectIndex:list[0].index,value:0})
      this.selectMap[0].isSelect = true
      this.initHtml()
      this.initMoneyTotal()
    }
    initHtml(){
      let html = ''
      html += '<ul class="selectpicker list-group"></ul><button class="addSelect btn btn-default">+</button><p class="total"></p>'
      $(".autoSelect").html(html)
    }
    initMoneyTotal() {
      let all = ""
      $.each(this.selectArr,(i,j) => {
        let html = ""
        let option = ""
        $.each(this.selectMap, function (index, obj) {
          if(obj.isSelect && obj.index == j.selectIndex){
            option += '<option data="'+obj.index+'" selected="selected" value="' + obj.text + '">' + obj.text + '</option>'
          }
          if(!obj.isSelect){
            option += '<option data="'+obj.index+'" value="' + obj.text + '">' + obj.text + '</option>'
          }
        })
        html += '<li id="'+i+'" class="list-group-item"><select data1="'+j.selectIndex+'" data="'+j.selectIndex+'" class="selectItem form-control" name="earnestRentPeriod">'
          + option +
          +'</select>' +
          '<div style="width:342px">' +
          '<input name="consultEarnestPrice" type="number" data="'+j.selectIndex+'" value="'+parseInt(j.value)+'" class="inputVal form-control" placeholder="請輸入金額">'+
          '<button class="reduce btn btn-default" index="'+j.selectIndex+'">-</button>' +
          '</div></li>'
        all += html
      })
      $('.selectpicker').html(all)
      const _self = this;
      $('.reduce').click(function(){
        const self = this;
        _self.reduce(self)
      })

      $(".selectItem").change(() => {
        const self = this;
        this.changeSelect(self)
      })

      $(".inputVal").keyup(() => {
        this.changeInput()
      })

      $('.addSelect').click( () => {
        this.add()
      })
    }
    getTotal(){
      let total = 0;
      $.each(this.selectArr,function(i,j){
        total += j.value
      })
      $(".total").text('總和：' + total)
    }

    changeSelect(index) {
      var oldSelect = parseInt($(index).attr("data"))
      var data1 =  parseInt($(index).attr("data1"))
      var nowIndex = parseInt($(index).find('option:selected').attr("data"))

      $.each(this.selectMap,function(i,j){
        if(data1 == j.selectIndex){
          j.selectIndex = nowIndex
        }
      })

      $.each(this.selectMap,function (index,obj) {
        if(obj.index == nowIndex){
          obj.isSelect = true;
        }
        if(obj.index == oldSelect){
          obj.isSelect = false
        }
      })
      this.initMoneyTotal()
    }
    add() {
      if(this.selectArr.length == this.selectMap.length){
        return
      }
      for(let i in this.selectMap){
        if(!this.selectMap[i].isSelect){
          this.selectMap[i].isSelect = true;
          this.selectArr.push({selectIndex:this.selectMap[i].index,value:0})
          break
        }
      }
      this.initMoneyTotal()
    }
    reduce(ele) {
      if(this.selectArr.length == 1){
        return
      }
      var index = parseInt($(ele).attr('index'))
      $.each(this.selectArr,(j,obj) => {
        if(obj.selectIndex == index){
          this.selectArr.splice(j,1)
          return false
        }
      })

      $.each(this.selectMap,function (i,obj) {
        if(obj.index == index){
          obj.isSelect = false;
        }
      })
      this.initMoneyTotal()
      this.getTotal()
    }
    changeInput() {
      var val = ""
      var index = ""
      var self = this;
      $(".inputVal").each(function(){
        index = parseInt($(this).attr("data"))
        val = parseInt($(this).val())
        $.each(self.selectArr,function(i,j){
          if(index == j.selectIndex){
            j.value = val
          }
        })
      })
      this.getTotal()
    }
  }
  const test = new selector([
    {index:0,text:'測試'},
    {index:1,text:'測試1'},
    {index:2,text:'測試2'},
    ])
</script>
</html>

複製程式碼

最後可以關注我的個人公眾號，學習更多相關知識，程式設計師們都在這裡，你又在哪裡呢？