首页技术文章正文

文本框、选项下拉列表里的几个属性与select...

更新时间:2018-09-18 来源:黑马程序员技术社区 浏览量:

文本框里的几个属性:

value:设置文本框里的初始文字。

disabled:默认为false 当为true时该文本框禁用。

readOnly:默认为false 当为true时该文本框不能输入文字只能阅读。

focus();该方法可以设置默认获取焦点。

以下为实验代码:



!DOCTYPE html>



<html>



        <head>



                <meta charset="utf-8" />



                <title></title>



        </head>



        <body>



                <form>



                        <input type="" name="i" id="wd" value="" />



                        <input type="submit" name="" id="" value="实验" onsubmit="return submitf()"/>



                </form>



                <script>



                        var text=document.getElementsByName("i")[0];



                                text.value="请输入文字";



                                text.focus();



                        function submitf(){



                                var text=document.getElementsByName("i")[0];



                                text.readOnly=true;//此为只读



                                text.disabled=true;//设置禁用



                                console.log(text.readOnly);



                                return true;



                        }



                        //type =password 或者textarea标签也有value 设置默认值  readonly disabled focus属性'



                </script>



        </body>



</html>



//当按下按钮时设置禁用和只读 默认获取焦点


选项里的几个属性(包括checkbox radio选项类型)

disabled:设置是否禁用这个选项;

value:获取该标签的value值;



<!DOCTYPE html>



<html>



        <head>



                <meta charset="UTF-8">



                <title></title>



        </head>



        <body>



                <span id="tishi" style="color: red;">







                </span>



                <form onsubmit="return test()">



                        <input type="submit" value="提交"/>



                        <input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" />女



                        <input type="checkbox" name="hobby" value="0"/>足球



                        <input type="checkbox" name="hobby" value="1"/>篮球



                        <input type="checkbox" name="hobby" value="2"/>羽毛球



                </form>



                <script>







                        function test(){



                                var radios=document.getElementsByName("sex");







                                /*for (var i=0;i<radios.length;i++) {



                                        var radio=radios;



                                        radio.disabled=true;//禁用



                                        console.log(radio.checked+","+radio.value);//checked为显示是否被选中



                                }*/ 



                //for 循环输出每个选择项的checked 并输出每个选项的value







                                var checkboxs=document.getElementsByName("hobby");



                                var hobby=checkboxs[0];



                                hobby.disabled=true;



                                console.log(hobby.value);



                                //禁用一选项并输出该选项的value







                                /*for (var i = 0; i <  checkboxs.length; i++) {



                                        var hobby=checkboxs;



                                        hobby.disabled=true;//disabled属性拥有禁用



                                        console.log(hobby.checked+","+hobby.value);



                                }*/ 



                //for 循环输出每个选择项的checked 并输出每个选项的value







                </script>



        </body>



</html>


下拉列表里的几个属性

通过给select一个 name 或者class (注意下标的问题因为可能有多个select)(id也行) 来用document.getElementsByName 或者ClassName 来获取下拉列表里的选项

从而可以用length属性来获取选项的个数

用selectedIndex属性来获取选中选项的位置

用value属性获取相应option标签里包裹的内容(value可以设置,但默认为标签内包裹的内容)

用text属性获取相应option标签里包裹的内容

下面options是包含下拉列表里所有标签的数组



!DOCTYPE html>



<html>



        <head>



                <meta charset="UTF-8">



                <title></title>



        </head>



        <body>



                <span id="tishi" style="color: red;">







                </span>



                <form onsubmit="return test()">



                        <input type="submit" value="提交"/>



                        <select name="g" class="g" id="g">



                                        <option >一年级</option>



                                        <option >二年级</option>



                                        <option >三年级</option>



                                        <option >四年级</option>



                        </select>



                </form>



                <script>











                        function test(){



                                        var selects=document.getElementById("g");



                                        console.log(selects.length);



                                        console.log(selects.selectedIndex);//里面的东西是选中的位置







                                        var options=selects.options;//option保存这个下拉列表里的东西



                                        console.log(options[selects.selectedIndex].value);



                                        for(var i=0;i<options.length;i++)//默认value是option里的东西



                                        {



                                                var option=options;



                                                console.log(option.value);



                                        }



                                        for(var i=0;i<options.length;i++)//option数组里存着下拉列表里的选项标签



                                        {



                                                var option=options;



                                                console.log(option);



                                        }



                                        options[0].disabled=true;//下拉列表里一样可以设置禁用



                                return false;



                        }



                </script>



        </body>



</html>


select里的几个方法:

添加选项可以通过new Option()与add()方法来实现

删除选项可以通过remove()方法来实现

示例代码



<!DOCTYPE html>



<html>



        <head>



                <meta charset="utf-8" />



                <title></title>



        </head>



        <body>



                <select id="set">



                        <option value="1">一</option>



                        <option value="2">二</option>



                        <option value="3">三</option>



                        <option value="4">四</option>



                </select>



                <input type="button" onclick="test()" value="按钮" />



                <script>



                        function test(){



                                 var select=document.getElementById("set");



                                 var option= new Option("五","5");//前一个值是option里的文本 后一个值是位置



                                 select.add(option);//在相应位置补充选项



                                 select.remove(3);//删除当前3所在位置的选线



                        }



                </script>



        </body>



</html>

本文版权归黑马程序员JavaEE学院所有,欢迎转载,转载请注明作者出处。谢谢!

作者:黑马程序员前端与移动开发培训学院
首发:http://web.itheima.com/?v2 

分享到:
在线咨询 我要报名
和我们在线交谈!