Js/JQuery下拉框添加新选项

最新推荐文章于 2024-06-05 10:16:58 发布

iam_syq

最新推荐文章于 2024-06-05 10:16:58 发布

阅读量3.8k

点赞数

分类专栏：功能实现文章标签： Js/JQ下拉框添加新选项

本文链接：https://blog.csdn.net/iam_syq/article/details/89342049

版权

功能实现专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>下拉列表添加新选项</title>
 </head>
 <body>
    <script type="text/javascript">
        function newOption(){
            //获取新增的省份
            var province=document.getElementById("newPro").value;
            //获取列表
            var newOption=document.getElementById("newOption")
            //在下拉列表中新增
            /*方法一
            var option=new Option(province)
            var nO=newOption.options.add(option)
            */
            //方法二
            //创建option对象
            var select=document.createElement("option")
            //在新增的option中添加值
            select.innerHTML=province
            //在新增的option中添加value
            select.value=province
            //把option对象添加到下拉列表中
            newOption.appendChild(select)


        }
    </script>
    <input type="text" id="newPro">
    <input type="button" value="新增" "newOption()"><br>
    <select id="newOption">
        <option value="">请选择省份</option>
        <option value="河北省">河北省</option>
        <option value="陕西省">陕西省</option>
        <option value="湖南省">湖南省</option>
    <select>
  
 </body>
</html>

<body>
    <script type="text/javascript">
        $(function(){
            //$('#div1').append('  world');//hello  world
            //$('#div1').appendTo('world');//world  hello
            $("#mybtn").click(function(){
                //获取text中的值
                var $mytext=$("#mytext").val();
                //去掉空格
                var mytext=$mytext.trim();
                //新增一个option到select中,把text中获取的值放入新增的option中
                var $newoption=$("#myselect").append("<option value='"+mytext+"'>"+mytext+"</option>");
                
            })
        })
    </script>
    <div id="div1">hello</div><hr>
    
    <input type="text" id="mytext">
    <input type="button" id="mybtn" value="新增"><br>
    <select id="myselect">
        <option value="">--省份--</option>
        <option value="河北省">河北省</option>
    </select>
    
  
 </body>

转载 http://www.cnblogs.com/xiuxiu123456/p/8478734.html

iam_syq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js/JQuery下拉框添加新选项

Js<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name...
复制链接

扫一扫