鍍金池/ 問(wèn)答/HTML/ 動(dòng)態(tài)拼接數(shù)組

動(dòng)態(tài)拼接數(shù)組

想請(qǐng)問(wèn)下，點(diǎn)擊右面的加號(hào)select的name='choose0-0'，每點(diǎn)一次變化為0-0到0-1，打亂順序添加出現(xiàn)了bug，需求大致如下圖
圖片描述

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .bigBox{
        margin-top: 60px;
        margin-left: 30px;
    }
    .bigBox a{
        text-decoration:none;
        font-size: 1.4em;
    }
</style>

</head>
<script src="jquery.js"></script>
<body>
<div class="bigBox">

<div class="box">
    <div class="sbox">
        <select name="choice0-0" id="choice">
            <option value="=">等于</option>
            <option value="!=">不等于</option>
        </select>
        <select name="tag[]" id="select">
        <option  value="">a</option>
        </select>
        <a href="##" class="add">+</a>
    </div>
    <a href="##" class="addall">+</a>
</div>

</div>
<script>

//右邊加號(hào)追加
 $(function(){
    let a=0;
    let b=0;
    $(document).on('click','.add',function(){
        b+=1;
        var value=`<select name="" id="">
        <option value="AND">和</option>
        <option value="OR">或</option>
        </select>
        <select name="choice`+a+`-`+b+`" id="choice">
        <option value="=">等于</option>
        <option value="!=">不等于</option>
        </select>
        <select name="tag[]" id="select">
    <option  value="">a</option>
        </select>
        <a href="##" class="add">+</a>`;
        $(this).parent().append(value);
    })
 });


//下面加號(hào)追加

$(function(){

   let a = 0;
   let b = 0;
$(document).on('click','.addall',function(){
   let b = $('.bigBox').children().length;    
    var v=`<div class="box">
    <div>
    <select name="choose[]" id="">
    <option value="AND">和</option>
    <option value="OR">或</option>
    </select>
    <select name="choice`+b+`-`+a+`" id="">
    <option value="=">等于</option>
    <option value="!=">不等于</option>
    </select>
    <select name="tag[]" id="select">
<option  value="">a</option>
    </select>
    <a href="##" class="add">+</a>
    </div>
    <a href="##" class="addall">+</a>
    </div>`;
    $(this).parent().parent().append(v)
})

})
</script>
</body>

</html>

回答
編輯回答
故林

先簡(jiǎn)單的幫你改下吧。。

//右邊加號(hào)追加
 $(function(){
    $(document).on('click','.add',function(){
        let colIndex = $(this).parent().find('select[name^="choice"]').length
        let rowIndex = $(this).parent().parent().index()
        var value=`<select name="" id="">
        <option value="AND">和</option>
        <option value="OR">或</option>
        </select>
        <select name="choice`+rowIndex+`-`+colIndex+`" id="choice">
        <option value="=">等于</option>
        <option value="!=">不等于</option>
        </select>
        <select name="tag[]" id="select">
    <option  value="">a</option>
        </select>
        <a href="##" class="add">+</a>`;
        $(this).parent().append(value);
    })
 });
2017年12月28日 00:52