JS如何动态给select的option赋值?

JavaScript016

JS如何动态给select的option赋值?,第1张

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后加一个数字