首頁技術文章正文

文本框、選項下拉列表里的幾個屬性與select...

更新時間:2018-09-18 來源:黑馬程序員技術社區(qū) 瀏覽量:

文本框里的幾個屬性：

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 循環(huán)輸出每個選擇項的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 循環(huán)輸出每個選擇項的checked 并輸出每個選項的value







                </script>



        </body>



</html>


下拉列表里的幾個屬性

通過給select一個 name 或者class （注意下標的問題因為可能有多個select）（id也行） 來用document.getElementsByName 或者ClassName 來獲取下拉列表里的選項

從而可以用length屬性來獲取選項的個數(shù)

用selectedIndex屬性來獲取選中選項的位置

用value屬性獲取相應option標簽里包裹的內容（value可以設置，但默認為標簽內包裹的內容）

用text屬性獲取相應option標簽里包裹的內容

下面options是包含下拉列表里所有標簽的數(shù)組



!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數(shù)組里存著下拉列表里的選項標簽



                                        {



                                                var option=options;



                                                console.log(option);



                                        }



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



                                return false;



                        }



                </script>



        </body>



</html>


select里的幾個方法：

添加選項可以通過new Option()與add()方法來實現(xiàn)

刪除選項可以通過remove()方法來實現(xiàn)

示例代碼



<!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學院所有，歡迎轉載，轉載請注明作者出處。謝謝！

作者：黑馬程序員前端與移動開發(fā)培訓學院
首發(fā)：http://web.itheima.com/?v2 

分享到：
在線咨詢 我要報名
和我們在線交談！