JSFiddle - React, Tailwind, and code Playground

by orangelion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script id='test-select-children-template' type='text/x-template'>
  <div class='js-selectes'>
  	<label>要素1</label>
    <select class='hoge' v-on:change='changeHoge($event)'>
      <option v-for='test1 in test1s' v-bind:value='test1.id'>
        {{ test1.name }}
      </option>
    </select>
    <label>要素2</label>
    <select class='foo' v-on:change='changeFoo($event)'>
      <option v-for='test2 in test2s' v-bind:value='test2.id'>
        {{ test2.name }}
      </option>
    </select>
  </div>
  <button v-on:click='addForm()'>追加</button>
</script>

<test-select-children></test-select-children>

CSS

select {
  width: 100px;
}

btn {
  width: 100px;
}

JavaScript

// https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
// https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js

Vue.component('test-select-children', {
	template: '#test-select-children-template',
  
  data: function() {
  	return {
    	filterCombinations: [{hogeId: 2, fooId: 3}],
    	test1s: [{id: 1, name: 'a'}, {id: 2, name: 'b'}],
     	test2s: [{id: 3, name: 'c'}, {id: 4, name: 'd'}],
      originTest1s: [{id: 1, name: 'a'}, {id: 2, name: 'b'}],
      originTest2s: [{id: 3, name: 'c'}, {id: 4, name: 'd'}],
      cloneElement: `
      	<div class='js-selectes'>
        	<label>要素1</label>
          <select class='hoge' v-on:change='changeHoge($event)'>
          	<option v-for='test1 in test1s' v-bind:value='test1.id'>
              {{ test1.name }}
            </option>
          </select>
          <label>要素2</label>
          <select class='foo' v-on:change='changeFoo($event)'>
          	<option v-for='test2 in test2s' v-bind:value='test2.id'>
              {{ test 2.name }}
            </option>
          </select>
        </div>
      `
    }
  },
  
  methods: {
  	changeHoge: function(e) {
    	const filterIds = this.filterIds('hoge', $(e.currentTarget));
      console.log(filterIds)
      this.test2s = this.test2s.filter(function(v) { return !filterIds.includes(v.id) });
      if (filterIds.length < 1) this.test2s = this.originTest2s;
    },
    changeFoo: function(e) {
    	const filterIds = this.filterIds('foo', $(e.currentTarget));
      this.test1s = this.test1s.filter(function(v) { return !filterIds.includes(v.id) });
      if (filterIds.length < 1) this.test1s = this.originTest1s;    
    },
    filterIds: function(type, $target) {
    	const val = parseInt($target.find('option:selected').val());
      const otherType = type === 'hoge' ? 'foo' : 'hoge';
      return this.filterCombinations.filter(function(v) {
      	return v[`${type}Id`] === val;
      })
      .map(function(v) { return v[`${otherType}Id`] });
    },
 ...