html下拉框怎么用js添加新值

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效果显示如下，自由添加功能实现。

除了html代码<a></a>没有关闭  你的逻辑有点乱

htm导航栏是

<li><a href="" ></a></li><!--a标签要关闭 -->

<li><a href="></a></li><!--a标签要关闭 -->

<li>

    <a href="></a>  <!--a标签要关闭 -->

   <div class="nav-list" id="dataTd" style="display: none">

       <a href=“">人物角色</a>

       <a href="">游戏视频</a>

   </div>  

</li>

html文件中有id为dataTd但是没有dataTh

js是

<script type="text/javascript">

    var oDiv1=document.getElementById('dataTh')

    //获取ID 为dataTh的html元素

    var oDiv2=document.getElementById('dataTd')

    //获取ID 为dataTd的html元素

     var timer=null

//onmouseover代表鼠标划入指定范围  触发事件

      oDiv2.onmouseover=oDiv1.onmouseover=function ()

    {

        clearTimeout(timer)

        oDiv2.style.display='block'

        oDiv1.className='data-list'

这几句代码的意思是  当鼠标指向id为dataTh或者id为dataTd的元素，触发id为dataTd的元素蔽纯胡显示，id为dataTh的元素添加类名为“data-list”的class类

    }

//onmouseout代表鼠标离开指定范围  触发事件

    oDiv2.onmouseout=oDiv1.onmouseout=function ()

    {

        timer=setTimeout(function (){

            oDiv2.style.display='none'id为dataTd的元素隐藏

            oDiv1.className=''id为dataTh的元素去掉类名为“data-list”的class类

        }, 100)

每0.1秒执行一次

    }

</script>

我给你举个例子

要实现的功能是  当鼠标划过列表中的id="dataTh"的元素时，隐藏的子菜单显示

html页面

<li>

    <a href=" id="dataTh"></a>  

<!--子菜单  以下处于隐藏状态 -->

    <div class="nav-list" id="dataTd" style="display: none">

       <a href=“">人物角色</a>

       <a href="裤铅">游戏视频</a>

    </div>  

<!--子菜单  以上处于隐藏状态 -->

</li>

JS

<script type="text/javascript">

    var oDiv1=document.getElementById('dataTh')

    //获取ID 为dataTh的html元素

    var oDiv2=document.getElementById('dataTd')

    //获取ID 为dataTd的html元素

     var timer=null

//onmouseover代表鼠标划入指定范围  触发事件

    oDiv1.onmouseover=function ()

    {

        clearTimeout(timer)

        oDiv2.style.display='block'

        oDiv1.className='data-list'

//这几句代码的意思是  当鼠标指向id为dataTh的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类

    }

//onmouseout代表鼠标离开指定范围  触发事件

    oDiv1.onmouseout=function ()

    {

        oDiv2.style.display='none'//id为dataTd的元素隐藏

     宏拦   oDiv1.className=''//id为dataTh的元素去掉类名为“data-list”的class类

    }

</script>

---