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

JavaScript019

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赋值。

<select name="" id="selectid">

</select>

<script type="text/javascript">

<!--

var selectid=document.getElementById("selectid")

selectid.options.length=0

selectid[0]=new Option("---- 设置显示0 ----",0)

selectid[1]=new Option("---- 设置显示1 ----",1)

selectid[2]=new Option("---- 设置显示2 ----",2)

//-->

</script>

<script type="text/javascript">

    $(function() {

        // 为所有的 class="sec" 下的 select 绑定 onchange 事件

        $(".sec select").change(function() {

            // 当选择的时候,找到当前选中的 option

            var option = $(this).find("option:selected")

            // 获得 value 和 对应文本

            var selv = option.val()

            var selt = option.text()

            // 然后找到 select 的父节点的第0个 span,把 selt 写入到 span 中

            $(this).parent().find("span:eq(0)").html(selt)

        })

        // 初始化的时候,执行一次change方法

        $(".sec select").change()

    })

</script>