JS动态给select的option赋值的具体操作步骤如下:
1、首先我们打开JS软件,点击界面左上角file选项目录下的new选项,再选择java project 新建web项目操作。
2、操作上图后进入下图界面,输入项目名点击下一步直到完成。
3、建立完成后,项目结构如下图。
4、在超链接中设置调用函数用于更新option,代码如下图红框所选。
5、在change函数中获取seclect项,获取option的数量,遍历option获取选中的option更新选中项。
6、最后看一下运行的效果,此时我们可以动态输入数值给select的option赋值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js动态创建select</title>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function () {
var _this = $('.list').find('tbody')
//添加
var _html = '<tr><td></td><td>' + _this.parent().find('.demo').find('.tdd').html() + '</td></tr>'//可自行修改创建select的位置
$('.addAppIntegral').click(function () {
//$(this).parents('.list').find('tbody').append(_html)//在某一元素内追加子元素
$(this).parents('.list').find('tbody').find('.demo').after(_html)//在某一元素的后面追加子元素(即紧跟在class="demo"的tr元素后面添加)
})
//删除
$('.delAppIntegral').live('click', function () {
var _tr = $(this).parents('tr')
if (_tr.attr('class') != "demo") {
if (confirm("你确定要删除这条数据吗?")) { _tr.remove() }
}
})
})
</script>
</head>
<body>
<table class="table list">
<tbody>
<tr class="demo">
<td>积分类型:</td>
<td class="tdd">
<select id="name_jflx2">
<option value="应用分发安装奖励" selected="">应用分发安装奖励</option>
<option value="应用分发留存奖励">应用分发留存奖励</option>
<option value="应用安装奖励">应用安装奖励</option>
<option value="2日打开奖励">2日打开奖励</option>
<option value="3日打开奖励">3日打开奖励</option>
<option value="4日打开奖励">4日打开奖励</option>
<option value="5日打开奖励">5日打开奖励</option>
<option value="6日打开奖励">6日打开奖励</option>
<option value="7日打开奖励">7日打开奖励</option>
<option value="30日打开奖励">30日打开奖励</option>
</select>
<select id="name_hqtj2">
<option value="现场安装" selected="">现场安装</option>
<option value="辅导打开">辅导打开</option>
<option value="次日留存">次日留存</option>
</select>
<input type="button" class="btn delAppIntegral" value="删除">
</td>
</tr>
<tr>
<td><input type="button" class="btn addAppIntegral" value="添加"></td>
</tr>
<tr><td>积分值:</td><td><input type="text"></td></tr>
</tbody>
</table>
</body>
</html>
1.可以动态添加多个下拉框,可减少下拉框2.选中第一个下拉框的任意一个值,同时第三个下拉框的值跟着改变,显示对应的数据。
ps:what?光动态添加就足以。。。。赋值还不能直接赋,而是添加下拉时就赋值。。。。。经过百般折磨,头发掉了n根,最终通过巧妙的思路解决了,在此记录下。若对你有所帮助,点赞加关注吧!后续及时更新。
第一个下拉选项显示
选择下拉项,同时加载数据到第三个下拉框
注:在这里直接去掉了第二行的标签
为了获取改变数据的行,试了很久,动态生成的下拉框无法获取到索引,所以才想到了使用id,并且给id后加一个数字