JS与Jquery之动态添加下拉框select并级联改变事件

JavaScript023

JS与Jquery之动态添加下拉框select并级联改变事件,第1张

1.可以动态添加多个下拉框,可减少下拉框

2.选中第一个下拉框的任意一个值，同时第三个下拉框的值跟着改变，显示对应的数据。

ps:what?光动态添加就足以。。。。赋值还不能直接赋，而是添加下拉时就赋值。。。。。经过百般折磨，头发掉了n根，最终通过巧妙的思路解决了，在此记录下。若对你有所帮助，点赞加关注吧！后续及时更新。

第一个下拉选项显示

选择下拉项，同时加载数据到第三个下拉框

注：在这里直接去掉了第二行的标签

为了获取改变数据的行，试了很久，动态生成的下拉框无法获取到索引，所以才想到了使用id，并且给id后加一个数字

// 动态添加DOM元素，需要对DOM进行操作，不太清楚你对JQ了解如何，JQ会比较简单些；

//html代码

<html>

    <body>

        <button onclick="addRow()">添加</button>&nbsp

        <button onclick="deleteRow()">删除</button>

        <div id="domOperate">

            <!-- dom操作放在该DIV中进行 -->

        </div>

    </body>

</html>

//js代码，要先引入jquery.js

<script type="text/javascript" src="" ></script>//这里引入jquery插件

<script type="text/javascrpt">

        //设置DOM操作父级元素

    var $target = $('#domOperate')

    //设置需要添加元素的模版

    var $addRow = $('<div class="row"><select><option value="1">下拉框</option></select><input type="text" name="inputDom" /></div>')

    //添加方法

    var addRow = function(){

        //对目标区域添加一行

        $target.append($addRow)

    }

    //移除方法，此处移除最后一个添加的

    var deleteRow = function(){

        if($target.find('.row').length > 0){//判断是否还有添加的元素

            $target.find('.row:last-child').remove()//找到最后一个删除

        }else{

            alert('已经没有可以删除的了')//此处也可以禁用按钮

        }

    }

</script>

第一步，在HBuilder编辑工具新建HTML5空白页面select.html，并引入VueJS核心js文件，如下图所示：

第二步，在body标签元素内插入div和select，注意给指定标签元素id属性值，如下图所示：

第三步，在div下方编写生成下拉框的数据源和绑定元素，下拉框有value和text，如下图所示：

第四步，预览该静态页面，发现下拉框什么都没有；打开浏览器控制台发现出现错误，如下图所示：

第五步，修改option标签数据绑定形式，利用v-bind，将js代码中的sel改为data，如下图所示：

6

第六步，再次预览该静态页面，发现下拉框数据源正确绑定，可以选择，如下图所示：