2.选中第一个下拉框的任意一个值，同时第三个下拉框的值跟着改变，显示对应的数据。
ps:what?光动态添加就足以。。。。赋值还不能直接赋，而是添加下拉时就赋值。。。。。经过百般折磨，头发掉了n根，最终通过巧妙的思路解决了，在此记录下。若对你有所帮助，点赞加关注吧！后续及时更新。
第一个下拉选项显示
选择下拉项，同时加载数据到第三个下拉框
注：在这里直接去掉了第二行的标签
为了获取改变数据的行，试了很久，动态生成的下拉框无法获取到索引，所以才想到了使用id，并且给id后加一个数字
html下拉框怎么用js添加新值javascript添加一个下拉列表项的方法：创建一个新的option节点，然后添加到目标select对象中去，关键代码如下：
1、var objSelect = document.getElementById(select_id)。
2、var new_opt = new Option(objItemText, objItemValue)。
3、objSelect.options.add(new_opt)。
实例演示如下：
1、HTML结构，包括一个select项，含有三个options。另外，设置input和button,通过自由父子，实现给select增加自定义option。
此时的显示效果如下，其中option中有三项。
2、JS的函数设计如下：
现有的options如下：
3、在页面上输入新的数据，点击添加。
此时的select效果显示如下，自由添加功能实现。
<!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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）