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
第六步,再次预览该静态页面,发现下拉框数据源正确绑定,可以选择,如下图所示: