マルチレベル連動select_option、(一部のバグが解決されていないため、無制限の階層連動は推奨されません)
マルチレベル連動は、レポートを使用するときによく使われます.例えば、3段階連動などです.3段階連動は比較的簡単な連動で、3つのselectラベル間のつながりと、彼らのデータ間のつながりを考慮すればいいのですが、いくつかの連動は数量に限定されません.つまり、selectタグを手動で追加して削除することができます.この時、私は開発の過程で問題に直面しました.新しく追加されたselectのデータと、私が各selectタグのoptionをトリガーしました.他のselectタグは影響を与えるべきではありません.最初は開発に適していました.私は大きな間違いを犯しました.私はすべてのレベルを連動して同じ配列を使用しました.2段連動3段連動は同じ理屈で、その結果、私がどの1段連動をトリガーしても、すべての2段連動はトリガーされ、これは非常に致命的な問題であることが分かった.最後に私が使った動的配列の形式は、3段連動の配列ごとに異なる名前を与え、値は同じで、名前は異なる.これにより、他のselectをトリガーすると、現在の3段階の連動にのみ影響します.
もう1つの問題はselectタグを削除することであり、先頭ノード以外のselectタグを削除する場合、指定位置のselectタグを削除することができるが、削除するこのタグは値を選択してから削除すると、この値が落ち、次のselectタグでoptionをクリアする方法はempty()には適用されない.これにより、下のラベルは常に実行できなくなり、値を直接修正することもできなくなります.ここでどのように操作するか、私はまだ分かりません.もし知っている神様がいたら、コメントしてください.私はコードを修正しました.
もう一つの問題は、値を取得するとき、私は直接1級連動、2級連動、3級連動の値を取得し、この3つの値のみを処理し、すべてのグループ(1つの3級連動は1グループ)の値を分類していないので、ここでの取得値にも問題があります.問題は、現在のグループの3段階連動の3つの値を選択した後、もう1つの3段階連動の値を選択することです.2番目のグループを選択したときに3段階または2段階などを選択した場合、取得した値はそのうちの1つの値しか置き換えられません.だから、他のグループを選択するときは、3段階連動を最初からクリックしてください.さもないと値のエラーの次はコードがjqueryを導入する必要がある.jsとvue.js
htmlセクション
もう1つの問題はselectタグを削除することであり、先頭ノード以外のselectタグを削除する場合、指定位置のselectタグを削除することができるが、削除するこのタグは値を選択してから削除すると、この値が落ち、次のselectタグでoptionをクリアする方法はempty()には適用されない.これにより、下のラベルは常に実行できなくなり、値を直接修正することもできなくなります.ここでどのように操作するか、私はまだ分かりません.もし知っている神様がいたら、コメントしてください.私はコードを修正しました.
もう一つの問題は、値を取得するとき、私は直接1級連動、2級連動、3級連動の値を取得し、この3つの値のみを処理し、すべてのグループ(1つの3級連動は1グループ)の値を分類していないので、ここでの取得値にも問題があります.問題は、現在のグループの3段階連動の3つの値を選択した後、もう1つの3段階連動の値を選択することです.2番目のグループを選択したときに3段階または2段階などを選択した場合、取得した値はそのうちの1つの値しか置き換えられません.だから、他のグループを選択するときは、3段階連動を最初からクリックしてください.さもないと値のエラーの次はコードがjqueryを導入する必要がある.jsとvue.js
htmlセクション
<link rel="stylesheet" type="text/css" href="selectComponent.css"/>
<script src="jquery.js" type="text/javascript" charset="utf-8"/>
<script src="vue.js" type="text/javascript" charset="utf-8"/>
<div id="app">
<div> </div>
<div class="addSelectCont" v-for="(item,index) in addSelectArr " :key="index">
<div v-if="item.type != 'simple'">
<select class="headSelect" name="">
<option v-for="(item,index) in menuArr" :key="index" :value="item.value">{
{item.value}}</option>
</select>
<div class="headBtn"> </div>
<div class="headBtn"> </div>
</div>
<div class="addSelectItem">
<select class="headSelect contSelect" v-for="(selectItems,keys) in item['addSelectList'+item.id]" :key="keys" :name="item.id +'-'+ keys ">
<option disabled="disabled" selected="selected"/>
<option v-for="(items,ind) in selectItems" :key="ind">{
{items.value}}</option>
</select>
<div class="del"> </div>
</div>
</div>
<div>
{
{selectValue[0]}}
{
{selectValue[1]}}
{
{selectValue[2]}}
</div>
</div>
</code></pre>
<h2>js </h2>
<pre><code>
var dataTwo = [{id:1, value:' 01' , pidval: ' 01'},{id:2, value:' 02' , pidval: ' 01'},{id:1, value:' 03' , pidval: ' 02'},{id:2, value:' 04' , pidval: ' 02'},{id:1, value:' 05' , pidval: ' 03'}]
var dataThree = [{id:1, value:' 01' , pidval: ' 01'},{id:2, value:' 02' , pidval: ' 01'},{id:1, value:' 03' , pidval: ' 02'},{id:2, value:' 04' , pidval: ' 02'},{id:3, value:' 05' , pidval: " 01"}]
var vm = new Vue({
el:'#app',
data:{
menuArr : [{id:0,value: 'many'},{id:1,value:"some"},{id:2,value:"little"}],
showSelect:false,
addSelectArr:[],
selectArrInd:0, //
selectItemInd:0, // select
currentArrIndx:0,
selectValue:[], //
selectVal:''
},
methods:{
addElemt(){
if(!this.showSelect){ //
this.selectValue = []
let arrInd = this.addSelectArr.length
let addSelectList = "addSelectList"+arrInd
let data = {id:arrInd, type : "complex",arr:addSelectList ,[addSelectList]:[[{id:1, value:' 01'},{id:2, value:' 02'},{id:3, value:' 03'},{id:4, value:' 04'},{id:5, value:' 05'}]] }
this.addSelectArr.push(data)
}else{
return
}
this.showSelect = true
},
simpleAdd(){
this.selectValue = []
let arrInd = this.addSelectArr.length
let addSelectList = "addSelectList"+arrInd
let data = {id:arrInd, type:"simple",arr:addSelectList ,[addSelectList]:[[{id:1, value:' 01'},{id:2, value:' 02'},{id:3, value:' 03'},{id:4, value:' 04'},{id:5, value:' 05'}]] }
this.addSelectArr.push(data)
},
complexAdd(){
this.selectValue = []
let arrInd = this.addSelectArr.length
let addSelectList = "addSelectList"+arrInd
let data = {id:arrInd, type : "complex",arr:addSelectList ,[addSelectList]:[[{id:1, value:' 01'},{id:2, value:' 02'},{id:3, value:' 03'},{id:4, value:' 04'},{id:5, value:' 05'}]] }
this.addSelectArr.push(data)
},
delectAdd(e){
this.selectValue = []
this.selectItemInd = 0
if(e>-1){
this.addSelectArr.splice(e,1)
}
this.addSelectArr = this.addSelectArr
},
tapSelect(row,col,arr){
this.selectArrInd = row
this.selectItemInd = col
this.currentArrIndx = arr
console.log(row,col,arr)
},
selectItem(e){
let val = e.target.value
let name = e.target.name
let arrIndx = this.currentArrIndx
let level = this.selectArrInd
let selInd = this.selectItemInd
let newArr = this.addSelectArr[arrIndx]
console.log(this.selectValue)
if(this.selectItemInd < 2){ //
if(name == level + '-' + selInd){
if(selInd == 0){ // select
this.selectValue.splice(0,1,val)
var nextSelect = dataTwo
newArr['addSelectList'+level].splice( this.selectItemInd + 1, 1, nextSelect)
}else if(selInd == 1){ // select
this.selectValue.splice(1,1,val)
var nextSelect = dataThree
newArr['addSelectList'+level].splice( this.selectItemInd + 1, 1, nextSelect)
}
}
}else{
this.selectValue.splice(2,1,val)
}
}
},
})
</code></pre>
<h2>css </h2>
<pre><code>select{
border-color: #d9d9d9;
border-radius: 4px;
padding:5px 10px;
}
.headBtn{
padding: 5px 10px;
border: 1px solid #d9d9d9;
border-radius: 4px;
display: inline-block;
font-size: 16px;
}
.headBtn:hover,.del:hover{
cursor: pointer;
}
.contSelect{
width: 200px;
margin: 10px 0;
}
.selectCont,.addSelectItem{
display: flex;
align-items: center;
}
</code></pre>
<p> , …</p>
</div>
</div>
</div>
</div>