Js/JQuery下拉框新增新選項

iam_syq發表於2019-04-16
JSjQuery

Js

<!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>

JQ

<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

相關文章