【JavaScript】表单 select 对象和 checkbox 复选框

曾经终败给现在 2022-05-30 08:08 129阅读 0赞

脚本编程最复杂的表单控件是 select 元素对象。select 对象其实是一个包含 option 对象数组的复合对象。此外，可在 HTML 中建立这个对象，把它显示为 下拉列表 或者 滚动列表，滚动列表可以配置为允许进行多选。

有些属性可用于整个 select 对象，其他属性则仅用于 select 对象中的单个选项。如果想要确定用户选择了哪一项，且编码处理最广泛的浏览器，就必须使用 select 和 option 对象的属性。

#### select 对象 ####

select 对象最重要的属性是 `selectedIndex`，即当前被选中的框中的文本的索引值

用法为：`formObject.selectName.selectedIndex`

#### option 对象 ####

创建一个 option 对象，即在 `<select>` 标签中创建一个或多个 文本

var e = document.getElementById("selectId");
    e.options = new Option("文本", "值");

options 是个数组，里面可以存放多个 `<option value="值">文本</option>` 这样的标签

**option 对象的方法**

增加一个 `<option>` 标签： `obj.options.add(new Option("文本", "值"))`

删除一个 `<option>` 标签： `obj.options.remove(obj.selectedIndex)`

获得一个 `<option>` 标签的文本： `obj.options[obj.selectedIndex].text`

获得一个 `<option>` 标签的值： `obj.options[obj.selectedIndex].value`

修改一个 `<option>` 标签的值： `obj.options[obj.selectedIndex] = new Option("新文本", "新值")`

删除所有 `<option>` 标签： `obj.options.length = 0`

注意：`obj.option` 中的 option 不需要大写， `new Option` 中的 Option 需要大写

--------------------

#### 实例：只允许单选的下拉列表 ####

<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Document</title>
            <script type="text/javascript"> var provinces = new Array(); provinces["湖北"] = ["武汉","襄阳","随州","宜昌","十堰"]; provinces["四川"] = ["成都","内江","达州"]; provinces["河南"] =["郑州","南阳","信阳","漯河"]; function changeProvince() { var prov = document.getElementById("province").value; var city = document.getElementById("city"); city.options.length = 0; for(var i in provinces[prov]) { city.options.add(new Option(provinces[prov][i], provinces[prov][i])); } } window.onload = function() { var province = document.getElementById("province"); for(var index in provinces) { province.options.add(new Option(index, index)); } province.fireEvent("onchange"); }; </script>
    </head>
    <body>
        省份:<select id="province" onchange= "changeProvince()"></select>
        城市:<select id="city"></select>     
    </body>
    </html>

#### 实例：允许多选的下拉列表 ####

<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Document</title>
            <script type="text/javascript"> function selected() { var select = document.getElementById("select"); var str = []; for(var i=0; i<select.length; i++) { if(select.options[i].selected) { str.push(select[i].value); } } console.log(str); } </script>
    </head>
    <body>
        <select name="" id="select" multiple>
            <option value="武汉">武汉</option>
            <option value="襄阳">襄阳</option>
            <option value="随州">随州</option>
            <option value="宜昌">宜昌</option>
            <option value="十堰">十堰</option>
        </select>
        <button onclick="selected()">确定</button>
    </body>
    </html>

#### 实例：复选框checkbox 全选、全不选、反选 ####

<html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script> window.onload = function(){ var btns = document.getElementsByTagName("button"); // 获取所有的按钮 var inputs = document.getElementsByTagName("input"); // 获取所有的选项input // 全选或者不选的时候 调用此函数 function fun(flag){ for (var i=0; i<inputs.length;i++) { inputs[i].checked = flag; } } //获取第一个按钮 “全选” btns[0].onclick = function(){ fun(true); } // 获取第二个按钮 "不选" btns[1].onclick = function(){ fun(false); } // 获取第三个按钮 “反选” btns[2].onclick = function(){ for (var i=0;i<inputs.length;i++) { inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true; } } // 输出选中的复选框的值 btns[3].onclick = function(){ var oCheckbox = document.getElementsByName("checkbox1"); var arr = []; var index = 0; for( var i=0; i<oCheckbox.length; i++){ if(oCheckbox[i].checked){ arr[index++] = oCheckbox[i].value; } } console.log(arr); } } </script>
        </head>
        <body>
            <div id="box1">
                <button>全选</button>
                <button>不选</button>
                <button>反选</button>
                <button>输出</button>
            </div>
            <div id="box2">
                <input type="checkbox" name="checkbox1" value="1" checked/>1
                <input type="checkbox" name="checkbox1" value="2"/>2
                <input type="checkbox" name="checkbox1" value="3" checked/>3
                <input type="checkbox" name="checkbox1" value="4"/>4
                <input type="checkbox" name="checkbox1" value="5"/>5
            </div>
        </body>
    </html>