Javascript将具有多个值的选定选项从一个列表移动到另一个列表

Question

我正在尝试为有多个选择的表单创建一个双重列表框。这包括两个列表，其中一个包含您可以从中选择的选项，另一个是已选择的选项。我正在使用带有 vue-bootstrap 的 vue2 而没有 Jquery。

我的两个列表是：

      list1:[
  {
    "id": 1,
    "foo": "Test",
    "bar": 12,
    "text": "a"
  },
  {
    "id": 2,
    "foo": "ee",
    "bar": 45,
    "text": "b"
  },
  {
    "id": 3,
    "foo": "aa",
    "bar": 345,
    "text": "c"
  },
  {
    "id": 4,
    "foo": "hi",
    "bar": 56,
    "text": "d"
  },
  {
    "id": 5,
    "foo": "Shot",
    "bar": "Pew pew",
    "text": "e"
  },
  {
    "id": 6,
    "foo": "as",
    "bar": 2345,
    "text": "f"
  }
],
      list2:[
  {
    "id": 5,
    "foo": "Tsst",
    "bar": 132,
    "text": "q1"
  },
  {
    "id": 6,
    "foo": "eeee",
    "bar": "4r5",
    "text": "q2"
  }
],

每个列表的 HTML 如下所示：

<b-row class="my-1">
    <b-col cols="5">
        <select size="30" class="form-control" id="list1" multiple>
            <option v-for="item1 in list1" v-bind:key="item1" value='{"foo":"item1.foo","bar":"item1.bar"}'>{{item1.text}}</option>
        </select>
    </b-col>
    <b-col cols="2">
        <b-col lg="4"  class="pb-2">
            <b-button class="primary" block  variant="primary" size="sm" @click="allToRight">&raquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="someToRight">&rsaquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="someToLeft">&lsaquo;</b-button>
            <b-button class="primary" block  variant="primary" size="sm" @click="allToLeft">&laquo;</b-button>
        </b-col>
    </b-col>
    <b-col cols="5">
        <select size="30" class="form-control" id="list2" multiple>
            <option v-for="item2 in list2" v-bind:key="item2" value='{"foo":"item2.foo","bar":"item2.bar"}'>{{item2.text}}</option>
        </select>
    </b-col>
</b-row>

控制按钮的 Javascript 如下所示：

  someToRight: function() {
    var select = document.getElementById('list1').value
    if(select != ""){
      this.list2.push(select)    //does not properly push values to other list
      var del = this.list1.indexOf(select)
      this.list1.splice(del,1)
    }
  },
  someToLeft: function() {
    var select = document.getElementById('list2').value
    if(select != ""){
      this.list1.push(select)   //does not properly push values to other list
      var del = this.list2.indexOf(select)
      this.list2.splice(del,1)
    }
  },
  allToRight: function() {
    for(let i = 0; i < this.list1.length; i++){
      this.list2.push(this.list1[i])
      this.list1.splice(i,1)
      i--
    }
  },
  allToLeft: function() {
      for(let i = 0; i < this.list2.length; i++){
      this.list1.push(this.list2[i])
      this.list2.splice(i,1)
      i--
  }
}

现在发送 allToLeft 和 allToRight 的按钮可以工作，但是用于移动一个或多个选定项目的按钮不起作用，除非我删除了额外的数据并使用单个值而不是 JSON 来创建列表，例如 ['a','b','c']我认为问题出在this.list.push(select) 行没有正确推送从一个列表推送到另一个列表的数据格式。

Answer 1

您不应该像这里那样通过 HTML 访问选择选项：

document.getElementById('list1').value

首先它不像你想象的那样工作，如果你想以这种方式访问​​选择选项，你可以使用类似这样的东西

document.getElementById('list1').options[0].value

除此之外，您应该始终使用您的数据，并且视图将相应更新，因此最好的解决方案是像这样访问您的数组

 someToRight: function() {
    var select = this.list1[0];
    if(select !== ""){
      this.list2.push(select) 
      var del = this.list1.indexOf(select)
      this.list1.splice(del,1)
    }
  },
  someToLeft: function() {
    var select = this.list2[0];
    if(select !== ""){
      this.list1.push(select)  
      var del = this.list2.indexOf(select)
      this.list2.splice(del,1)
    }
  }

Answer 2

你可以尝试如下 sn-p ：

new Vue({
  el: '#demo',
  data() {
    return {
      list1:[
        {"id": 1, "foo": "Test", "bar": 12, "text": "a"},
        {"id": 2, "foo": "ee", "bar": 45, "text": "b"},
        {"id": 3, "foo": "aa", "bar": 345, "text": "c"},
        {"id": 4, "foo": "hi", "bar": 56, "text": "d"},
      ],
      list2:[
        {"id": 5,"foo": "Tsst", "bar": 132, "text": "q1"},
        {"id": 6, "foo": "eeee", "bar": "4r5", "text": "q2"}
      ],
      selectedItems: [],
      key: []
    }
  },
  methods: {
    addItem(item) {
      this.list2.push(item)
      let index = this.list1.indexOf(item)
      this.list1.splice(index, 1)
    },
    removeItem(item) {
      this.list1.push(item)
      let index = this.list2.indexOf(item)
      this.list2.splice(index, 1)
    },
    allToRight() {
      this.list2 = this.list2.concat(this.list1)
      this.list1 = []
    },
    allToLeft() {
      this.list1 = this.list1.concat(this.list2)
      this.list2 = []
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="demo">
  <b-row class="my-1">
    <b-col cols="5">
      <select size="30" class="form-control" id="list1" multiple >
        <option v-for="item1 in list1" :key="item1.id" :value="item1.id" @click="addItem(item1)">{{item1.text}}</option>
      </select>
    </b-col>
    <b-col cols="2">
      <b-col lg="4"  class="pb-2">
        <b-button class="primary" block  variant="primary" size="sm" @click="allToRight">&raquo;</b-button>
        <b-button class="primary" block  variant="primary" size="sm" @click="allToLeft">&laquo;</b-button>
      </b-col>
    </b-col>
    <b-col cols="5">
      <select size="30" class="form-control" id="list2" multiple>
        <option v-for="item2 in list2" :key="item2.id" :value="item2.id" @click="removeItem(item2)">{{item2.text}}</option>
      </select>
    </b-col>
</b-row>
</div>