问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

动态拼接数组

头像
月东来
    1354175

    想请问下，点击右面的加号select的name='choose0-0'，每点一次变化为0-0到0-1，打乱顺序添加出现了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>

    //右边加号追加
 $(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);
    })
 });


//下面加号追加

    $(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>

    javascript
    阅读 1.4k
    1 个回答
    得票最新
    头像
    Jarvis
      5.1k1419
      ✓ 已被采纳

      先简单的帮你改下吧。。

      //右边加号追加
 $(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);
    })
 });
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题