选择框脚本_添加/删除选项 P434

 

<!DOCTYPE html>
<html>
<head>
    <title>Selectbox Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    
    <form method="post" action="javascript:alert('Form submitted!')" id="myForm">            
        <div>
            <label for="selLocation">Where do you want to live?</label>
            <select name="location" id="selLocation" size="5" multiple>
                <option value="Sunnyvale, CA">Sunnyvale</option>
                <option value="Los Angeles, CA">Los Angeles</option>
                <option value="Mountain View, CA">Mountain View</option>
                <option value="">China</option>
                <option>Australia</option>
            </select>
        </div>
        <fieldset>
            <legend>Add a option</legend>
            <label for="txtText">What should the text be?文本应该是什么？</label>
            <input type="text" id="txtText" value=""><br>
            <label for="txtValue">What should the value be?值应该是什么？</label>
            <input type="text" id="txtValue" value=""><br>
            <input type="button" value="使用 DOM 添加" id="btnAdd1">
            <input type="button" value="使用 Option构造函数 或 add()方法 添加" id="btnAdd2">
        </fieldset>
        <fieldset>
            <legend>Remove a option</legend>
            <input type="button" value="使用 DOM 删除" id="btnRemove1">
            <input type="button" value="使用 remove()方法 删除" id="btnRemove2">
            <input type="button" value="使用 null关键字 删除" id="btnRemove3">
        </fieldset>
        <input type="button" value="获取选中项信息" id="btnSelected">
    </form>     
    <script type="text/javascript">
        (function(){

            function getSelectedOptions(selectbox){
                var result = new Array();
                var option = null;
                
                for (var i=0, len=selectbox.options.length; i < len; i++){
                    option = selectbox.options[i];
                    if (option.selected){
                        result.push(option);
                    }
                }
                
                return result;            
            }
            
            var btn1 = document.getElementById("btnAdd1");
            var btn2 = document.getElementById("btnAdd2");
            var btn3 = document.getElementById("btnSelected");
            var btn4 = document.getElementById("btnRemove1");
            var btn5 = document.getElementById("btnRemove2");
            var btn6 = document.getElementById("btnRemove3");

            /*使用DOM添加*/
            EventUtil.addHandler(btn1, "click", function(event){
                var selectbox = document.getElementById("selLocation");
                var textTextbox = document.getElementById("txtText");
                var valueTextbox = document.getElementById("txtValue");
                
                var newOption = document.createElement("option");
                newOption.appendChild(document.createTextNode(textTextbox.value));
                newOption.setAttribute("value", valueTextbox.value);
                
                selectbox.appendChild(newOption);
            
            });
　　　　　　　/*使用DOM添加end*/

　　　　　　　/*使用Option构造函数添加，使用add()方法添加*/
            EventUtil.addHandler(btn2, "click", function(event){
                var selectbox = document.getElementById("selLocation");
                var textTextbox = document.getElementById("txtText");
                var valueTextbox = document.getElementById("txtValue");
                var newOption = new Option(textTextbox.value, valueTextbox.value);

                selectbox.appendChild(newOption);
                //selectbox.add(newOption, undefined);
            });
　　　　　　　/*使用Option构造函数添加，使用add()方法添加 end*/

　　　　　　　/*获取选中项的值*/
            EventUtil.addHandler(btn3, "click", function(event){
                var selectbox = document.getElementById("selLocation");
                var selectedOptions = getSelectedOptions(selectbox);
                var message = "";
                
                for (var i=0, len=selectedOptions.length; i < len; i++){
                    message += "Selected index: " + selectedOptions[i].index + 
　　　　　　　　　　　　　　　　　　"\nSelected text: " + selectedOptions[i].text + 
　　　　　　　　　　　　　　　　　　"\nSelected value: " + selectedOptions[i].value + "\n\n";
                }
                console.log(message);
            });
            /*获取选中项的值end*/

　　　　　　　/*使用DOM删除*/
            EventUtil.addHandler(btn4, "click", function(event){
　　　　　　　　　　event = EventUtil.getEvent( event );
　　　　　　　　　　var target = EventUtil.getTarget( event );
　　　　　　　　　　var selectbox = document.getElementById("selLocation");

　　　　　　　　　　for( var i = 0, len = selectbox.options.length; i < len; i++ ){
　　　　　　　　　　　　if( selectbox.options[i].selected ){
　　　　　　　　　　　　　　selectbox.removeChild(selectbox.options[i]);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　});
　　　　　　  /*使用DOM删除end*/
　　　　　　　/*使用remove()方法删除*/
            EventUtil.addHandler(btn5, "click", function(event){
　　　　　　　　　　event = EventUtil.getEvent( event );
　　　　　　　　　　var target = EventUtil.getTarget( event );
　　　　　　　　　　var selectbox = document.getElementById("selLocation");
　　　　　　　　　　for( var i = 0, len = selectbox.options.length; i < len; i++ ){
　　　　　　　　　　　　if( selectbox.options[i].selected ){
　　　　　　　　　　　　　　selectbox.remove(selectbox.options[i]);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　}); 
　　　　　　  /*使用remove()方法删除end*/
　　　　　　  /*使用 null关键字 删除*/
            EventUtil.addHandler(btn6, "click", function(event){
　　　　　　　　　　event = EventUtil.getEvent( event );
　　　　　　　　　　var target = EventUtil.getTarget( event );
　　　　　　　　　　var selectbox = document.getElementById("selLocation");
　　　　　　　　　　for( var i = 0, len = selectbox.options.length; i < len; i++ ){
　　　　　　　　　　　　if( selectbox.options[i].selected ){
　　　　　　　　　　　　　　selectbox.options[i] = null ;
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}); 
　　　　　　　　/*使用 null关键字 删除 end*/ 
　　　　　})(); 
　　　　</script> 
　　</body> 
</html>

 

posted on 2020-08-02 14:47  九涅  阅读(181)  评论(0)    收藏  举报

导航