常用JS操作（復選框、單選框、下拉框）

本文轉載自查看原文 2012-07-18 09:43 4931 JavaScript/ javascript

直接上代碼：

jskey_form.js

View Code

if( typeof ($jskey) != "object")
{
    $jskey = {};
}

$jskey.checkbox =
{
     /* *
     * 返回指定復選框組被選中的個數,沒有選中則返回0
     * name:復選框組名
      */
    countSelected: function(name)
    {
         var _count = 0;
         var _eles = document.getElementsByName(name);
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _count++;
            }
        }
         return _count;
    },
     /* *
     * 返回指定復選框組被選中的選項數組信息Array=[{id:"",value:""},...](必須有ID屬性,可多單選),沒有選中則返回空數組並提示信息
     * name:復選框組名
     * showMessage:沒有選中時的提示信息(為空則不提示)
      */
    getSelected: function(name, showMessage)
    {
         var _arr = [];
         var _eles = document.getElementsByName(name);
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _arr[_arr.length] =
                {
                    "id":_eles[i].getAttribute("id"),
                    "value":_eles[i].value
                };
            }
        }
         if(_arr.length == 0 && showMessage.length > 0)
        {
            alert(showMessage);
        }
         return _arr;
    },
     /* *
     * 返回指定復選框組被選中值,並以separator分隔開,沒有選中則返回""
     * name:復選框組名
     * separator:分隔符
      */
    getSelectedBySeparator: function(name, separator)
    {
         var _v = "";
         var _eles = document.getElementsByName(name);
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _v += ((_v == "") ? "" : separator) + _eles[i].value;
            }
        }
         return _v;
    },
     /* *
     * 返回指定復選框組被選中選項的ID(必須有ID屬性),並以separator分隔開
     * name:復選框組名
     * separator:分隔符
      */
    getSelectedIdBySeparator: function(name, separator)
    {
         var _v = "";
         var _eles = document.getElementsByName(name);
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _v += ((_v == "") ? "" : separator) + _eles[i].getAttribute("id");
            }
        }
         return _v;
    },
     /* *
     * 返回指定復選框組被選中的選項信息{id:"",value:""}(必須有ID屬性,僅單選),沒有選中則返回null
     * name:復選框組名
     * showMessage:沒有選中或非單選時的提示信息(為空則不提示)
      */
    getSingleSelected: function(name, showMessage)
    {
         var _count = 0;
         var _o = {};
         var _eles = document.getElementsByName(name);
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _count++;
                _o.id = _eles[i].getAttribute("id");
                _o.value = _eles[i].value;
            }
        }
         if(_count != 1)
        {
             if(showMessage.length > 0)
            {
                alert(showMessage);
            }
            _o = null;
        }
         return _o;
    },
     /* *
     * 判斷是否有選中至少一個選項
     * name:復選框組名
      */
    isSelected: function(name)
    {
         var _sel = false;
         var _eles = document.getElementsByName(name);
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _sel = true;
                 break;
            }
        }
         return _sel;
    },
     /* *
     * 根據指定的狀態重選目標復選框組
     * name:復選框組名
     * isChecked:狀態,全選[true/false]/反選[null]
      */
    reselect: function(name, isChecked)
    {
         var _eles = document.getElementsByName(name);
         if(isChecked == null)
        {
             for( var i = 0;i < _eles.length;i++)
            {
                _eles[i].checked = !(_eles[i].checked);
            }
        }
         else
        {
            isChecked = (isChecked) ? true : false;
             for( var i = 0;i < _eles.length;i++)
            {
                _eles[i].checked = isChecked;
            }
        }
    }
};

$jskey.radio =
{
     /* *
     * 返回指定單選框組被選中的選項信息{id:"",value:""}(必須有ID屬性),沒有選中則返回null
     * name:單選框組名
     * showMessage:沒有選中時的提示信息(為空則不提示)
      */
    getSelected: function(name, showMessage)
    {
         var _chk = false;
         var _o = {};
         var _eles = document.getElementsByName(name);
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _o.id = _eles[i].getAttribute("id");
                _o.value = _eles[i].value;
                _chk = true;
                 break;
            }
        }
         if(!_chk)
        {
             if(showMessage.length > 0)
            {
                alert(showMessage);
            }
            _o = null; // 沒有值被選中
        }
         return _o;
    },
     /* *
     * 根據單選框組名取得選中的ID,沒有選中則返回defaultValue
     * name:單選框組名
      */
    getId: function(name, defaultValue)
    {
         var _eles = document.getElementsByName(name);
         var _v = defaultValue;
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _v = _eles[i].getAttribute("id");
                 break;
            }
        }
         return _v;
    },
     /* *
     * 根據單選框組名取得選中的值,沒有選中則返回defaultValue
     * name:單選框組名
      */
    getValue: function(name, defaultValue)
    {
         var _eles = document.getElementsByName(name);
         var _v = defaultValue;
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].checked)
            {
                _v = _eles[i].value;
                 break;
            }
        }
         return _v;
    },
     /* *
     * 根據單選框組名與指定值進行重選,如果存在該指定值則選中指定值,沒有值被選中,默認選中第一項
     * name:單選框組名
     * defaultValue:指定值
     * isDisabled:是否使其它值為不可選狀態
      */
    reselect: function(name, defaultValue, isDisabled)
    {
         var _eles = document.getElementsByName(name);
         var _chk = false;
         for( var i = 0;i < _eles.length;i++)
        {
             if(_eles[i].value == defaultValue)
            {
                _eles[i].disabled = false;
                _eles[i].checked = true;
                _chk = true;
            }
             else
            {
                _eles[i].disabled = isDisabled;
            }
        }
         if(!_chk)
        {
             // 沒有值被選中,默認選中第一項
            _eles[0].disabled = false;
            _eles[0].checked = true;
        }
         return _chk;
    },
     /* *
     * 重置單選框組
     * name:單選框組名
     * isDisabled:是否使其它值為不可選狀態
      */
    reset: function(name, isDisabled)
    {
         var _eles = document.getElementsByName(name);
        isDisabled = isDisabled ? true : false;
        {
             for( var i = 0;i < _eles.length;i++)
            {
                _eles[i].disabled = isDisabled;
                _eles[i].checked = false;
            }
        }
    }
};

$jskey.select =
{
     /* private function */
    $: function(id)
    {
         return document.getElementById(id);
    },
    swapOption: function(opt1, opt2) // 交換選項屬性
    {
         var _temp;

        _temp = opt1.value;
        opt1.value = opt2.value;
        opt2.value = _temp;

        _temp = opt1.text;
        opt1.text = opt2.text;
        opt2.text = _temp;

        _temp = opt1.selected;
        opt1.selected = opt2.selected;
        opt2.selected = _temp;
    },
     /* public function */
     /* *
     * 判斷相應的選項值是否在下拉框中存在
     * id:下拉框對象ID
     * optionValue:用於比較的值
      */
    exist: function(id, value)
    {
         var _o = this.$(id);
         for( var i = 0;i < _o.options.length;i++)
        {
             if(value == _o.options[i].value)
                 return true;
        }
         return false;
    },
     /* *
     * 添加一個選項
     * id:下拉框對象ID
     * text:顯示值
     * value:選項值
      */
    add: function(id, text, value)
    {
         var _o = this.$(id);
        _o.options[_o.options.length] = new Option(text, value);
    },
     /* *
     * 將來源下拉框中的選項,復制到目標下拉框
     * fromID:來源下拉框對象ID
     * toID:目標下拉框對象ID
     * isSelected:狀態,添加選中項[true]/添加全部項[false]
     * isClear:復制前是否清空目標下拉框,清空[true]/保留[false]
      */
    copy: function(fromID, toID, isSelected, isClear)
    {
         var _from = this.$(fromID);
         var _to = this.$(toID);
         if(_from.options.length > -1)
        {
             if(isSelected)
            {
                 if(_from.selectedIndex > -1)
                {
                     if(isClear){_to.options.length = 0;}
                     for( var i = 0;i < _from.options.length;i++)
                    {
                         if(_from.options[i].selected && ! this.exist(toID, _from.options[i].value)) // 判斷重復的內容
                        {
                            _to.options[_to.options.length] = new Option(_from.options[i].text, _from.options[i].value);
                        }
                    }
                }
                 else
                {
                    alert("未選擇任何選項!");
                }
            }
             else
            {
                 if(isClear){_to.options.length = 0;}
                 for( var i = 0;i < _from.options.length;i++)
                {
                    _to.options[_to.options.length] = new Option(_from.options[i].text, _from.options[i].value);
                }
            }
        }
         else
        {
            alert("找不到選項!");
        }
    },
     /* *
     * 移動選中的選項
     * id:下拉框對象ID
     * count:數字,移動的長度(0則根據isWay移到最上/最下)
     * isWay:是否向上移(向上移[true],向下移[false])
      */
    move: function(id, count, isWay)
    {
         var _o = this.$(id);
         var _opts = _o.options;
         if(count == 0)
        {
             var _tmp = null;
             if(isWay)
            { // 頂
                 for( var i = 0;i <_opts.length;i++)
                {
                     if(_opts[i].selected && _tmp)
                    {
                        _o.insertBefore(_opts[i], _tmp);
                    }
                     else if(!_tmp && !_opts[i].selected)
                    {
                        _tmp = _opts[i];
                    }
                }
            }
             else
            { // 尾
                 for( var i = _opts.length - 1;i > -1;i--)
                {
                     if(_opts[i].selected)
                    {
                         if(_tmp)
                        {
                            _tmp = _o.insertBefore(_opts[i], _tmp);
                        }
                         else
                        {
                            _tmp = _o.appendChild(_opts[i]);
                        }
                    }
                }
            }
        }
         else
        {
             if(isWay)
            { // 上
                 for( var c = 0;c < count;c++)
                {
                     for( var i = 1;i < _opts.length;i++)
                    {
                         if(_opts[i].selected && !_opts[i - 1].selected)
                        {
                             this.swapOption(_opts[i], _opts[i - 1]);
                        }
                    }
                }
            }
             else
            { // 下
                 for( var c = 0;c < count;c++)
                {
                     for( var i = _opts.length - 2;i > -1;i--)
                    {
                         if(_opts[i].selected && !_opts[i + 1].selected)
                        {
                             this.swapOption(_opts[i], _opts[i + 1]);
                        }
                    }
                }
            }
        }
    },
     /* *
     * 移除選項
     * id:下拉框對象ID
     * isSelected:狀態,移除選中項[true]/移除全部項[false]
      */
    remove: function(id, isSelected)
    {
         var _o = this.$(id);
         if(isSelected)
        {
             if(_o.selectedIndex == -1)
            {
                alert("未選擇任何選項!");
            }
             for( var i = _o.length - 1;i >= 0;i--)
            {
                 if(_o.options[i].selected)
                {
                    _o.remove(i);
                }
            }
        }
         else
        {
            _o.options.length = 0;
        }
    },
     /* *
     * 根據指定的狀態重選目標下拉框選項
     * id:下拉框對象ID
     * isSelected:狀態,全選[true/false]/反選[null]
      */
    reselect: function(id, isSelected)
    {
         var _o = this.$(id);
         var _opts = _o.options;
         if(isSelected == null)
        {
             for( var i = 0;i < _opts.length;i++)
            {
                _opts[i].selected = !_opts[i].selected;
            }
        }
         else
        {
            isSelected = (isSelected) ? true : false;
             for( var i = 0;i < _opts.length;i++)
            {
                _opts[i].selected = isSelected;
            }
        }
    },
     /* *
     * 將來源下拉框中的選項,移動到目標下拉框
     * fromID:來源下拉框對象ID
     * toID:目標下拉框對象ID
     * isSelected:狀態,移動選中項[true]/移動全部項[false]
      */
    swap: function(fromID, toID, isSelected)
    {
         var _from = this.$(fromID);
         var _to = this.$(toID);
         if(_from.options.length > -1)
        {
             var arr = [];
             if(isSelected)
            {
                 if(_from.selectedIndex > -1)
                {
                     // 先移除所選的內容
                     for( var i = _from.length - 1;i >= 0;i--) // 保存所選選項，並移除
                    {
                         if(_from.options[i].selected)
                        {
                            arr[arr.length] = new Option(_from.options[i].text, _from.options[i].value);
                            _from.remove(i);
                        }
                    }
                     for( var i = 0;i < arr.length;i++)
                    {
                        _to.options[_to.options.length] = arr[i];
                    }
                }
                 else
                {
                    alert("未選擇任何選項!");
                }
            }
             else
            {
                 for( var i = _from.length - 1;i >= 0;i--) // 保存所有選項，並移除
                {
                    arr[arr.length] = new Option(_from.options[i].text, _from.options[i].value);
                    _from.remove(i);
                }
                 for( var i = 0;i < arr.length;i++)
                {
                    _to.options[_to.options.length] = arr[i];
                }
            }
        }
         else
        {
            alert("找不到選項!");
        }
    }
     /*
    ,
    //IE下自動調整下拉框寬度,move和moveAll方法中使用
    resetAutoWidth:function(obj)
    {
        try
        {
            var tempWidth = obj.style.getExpression("width");
            if(tempWidth != null)
            {
                obj.style.width = "auto";
                obj.style.setExpression("width", tempWidth);
                obj.style.width = null;
            }
        }
        catch(e){}
    }
     */
};

樣例代碼：

jskey_form_demo.html

View Code

<!DOCTYPE html>
<html>
<head>
    <style>
        body {font-size:12px;}
        input {cursor:pointer;}
        div.title {color:#000000;font-size:30px;font-weight:bold;margin:10px auto;width:200px;text-align:center;}
        div.box {border:#000000 3px solid;width:95%;padding:20px 20px;}
        hr {}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="../jskey_form.js" type="text/javascript"></script>
    <script type="text/javascript">
     function arrToString(_arr)
    {
         var _t = "[{id:\"" + _arr[0].id + "\",value:\"" + _arr[0].value + "\"}";
         for( var i = 1;i < _arr.length;i++)
        {
            _t += ",{id:\"" + _arr[i].id + "\",value:\"" + _arr[i].value + "\"}";
        }
        _t += "]";
         return _t;
    }
     function objToString(_obj)
    {
         if(_obj == null) return null;
         return "{id:\"" + _obj.id + "\",value:\"" + _obj.value + "\"}";
    }
    </script>
</head>
<body>

<br /><br />

<div class="box">
    <div class="title">checkbox</div>

    <br /><hr /><br />

    <input id="c_id_1" name="c_name" type="checkbox" value="v1" /><label for="c1">1</label>
    <input id="c_id_2" name="c_name" type="checkbox" value="v2" /><label for="c2">2</label>
    <input id="c_id_3" name="c_name" type="checkbox" value="v3" /><label for="c3">3</label>
    <input id="c_id_4" name="c_name" type="checkbox" value="v4" /><label for="c4">4</label>
    <input id="c_id_5" name="c_name" type="checkbox" value="v5" /><label for="c5">5</label>
    <input id="c_id_6" name="c_name" type="checkbox" value="v6" /><label for="c6">6</label>
    <input id="c_id_7" name="c_name" type="checkbox" value="v7" /><label for="c7">7</label>
    <input id="c_id_8" name="c_name" type="checkbox" value="v8" /><label for="c8">8</label>
    <input id="c_id_9" name="c_name" type="checkbox" value="v9" /><label for="c9">9</label>
    <input id="c_id_0" name="c_name" type="checkbox" value="v0" /><label for="c0">0</label>
    <br />
    <input type="button" value="被選中的個數" onclick="alert($jskey.checkbox.countSelected('c_name'));" /> countSelected(name)<br />
    <input type="button" value="被選中的選項數組信息[{id,value}]" onclick="alert(arrToString($jskey.checkbox.getSelected('c_name', '至少選中一項')));" /> getSelected(name, showMessage)<br />
    <input type="button" value="以separator分隔被選中選項的值" onclick="alert($jskey.checkbox.getSelectedBySeparator('c_name', ','));" /> getSelectedBySeparator(name, separator)<br />
    <input type="button" value="以separator分隔被選中選項的ID" onclick="alert($jskey.checkbox.getSelectedIdBySeparator('c_name', ','));" /> getSelectedIdBySeparator(name, separator)<br />
    <input type="button" value="被選中的選項信息{id,value}" onclick="alert($jskey.checkbox.getSingleSelected('c_name', '只能選中一項'));" /> getSingleSelected(name, showMessage)<br />
    <input type="button" value="是否有選中一項" onclick="alert($jskey.checkbox.isSelected('c_name'));" /> isSelected(name)<br />
    <input type="button" value="反選" onclick="$jskey.checkbox.reselect('c_name', null);" /> reselect(name, null)<br />
    <input type="checkbox" onclick="$jskey.checkbox.reselect('c_name', this.checked);" />重選目標 reselect(name, isChecked)

    <br /><hr /><br />

    <pre>
         /* *
         * 調用對象：$jskey.checkbox
          */

         /* ************************************************************ */
         /* 調用方法 */
         /* ************************************************************ */

         /* *
         * 返回指定復選框組被選中的個數,沒有選中則返回0
         * name:復選框組名
          */
        countSelected(name)

         /* *
         * 返回指定復選框組被選中的選項數組信息Array=[{id:"",value:""},...](必須有ID屬性,可多單選),沒有選中則返回空數組並提示信息
         * name:復選框組名
         * showMessage:沒有選中時的提示信息(為空則不提示)
          */
        getSelected(name, showMessage)

         /* *
         * 返回指定復選框組被選中值,並以separator分隔開,沒有選中則返回""
         * name:復選框組名
         * separator:分隔符
          */
        getSelectedBySeparator(name, separator)

         /* *
         * 返回指定復選框組被選中選項的ID(必須有ID屬性),並以separator分隔開
         * name:復選框組名
         * separator:分隔符
          */
        getSelectedIdBySeparator(name, separator)

         /* *
         * 返回指定復選框組被選中的選項信息{id:"",value:""}(必須有ID屬性,僅單選),沒有選中則返回null
         * name:復選框組名
         * showMessage:沒有選中或非單選時的提示信息(為空則不提示)
          */
        getSingleSelected(name, showMessage)

         /* *
         * 判斷是否有選中至少一個選項
         * name:復選框組名
          */
        isSelected(name)

         /* *
         * 根據指定的狀態重選目標復選框組
         * name:復選框組名
         * isChecked:狀態,全選[true/false]/反選[null]
          */
        reselect(name, isChecked)
         /* ************************************************************ */
    </pre>
</div>

<br /><br />

<div class="box">
    <div class="title">radio</div>

    <br /><hr /><br />

    <input id="r_id_1" name="r_name" type="radio" value="v1" /><label for="r1">1</label>
    <input id="r_id_2" name="r_name" type="radio" value="v2" /><label for="r2">2</label>
    <input id="r_id_3" name="r_name" type="radio" value="v3" /><label for="r3">3</label>
    <input id="r_id_4" name="r_name" type="radio" value="v4" /><label for="r4">4</label>
    <input id="r_id_5" name="r_name" type="radio" value="v5" /><label for="r5">5</label>
    <input id="r_id_6" name="r_name" type="radio" value="v6" /><label for="r6">6</label>
    <input id="r_id_7" name="r_name" type="radio" value="v7" /><label for="r7">7</label>
    <input id="r_id_8" name="r_name" type="radio" value="v8" /><label for="r8">8</label>
    <input id="r_id_9" name="r_name" type="radio" value="v9" /><label for="r9">9</label>
    <input id="r_id_0" name="r_name" type="radio" value="v0" /><label for="r0">0</label>
    <br />
    <input type="button" value="被選中的選項信息{id,value}" onclick="alert(objToString($jskey.radio.getSelected('r_name', '請選擇')));" /> getSelected(name, showMessage)<br />
    <input type="button" value="被選中選項的ID" onclick="alert($jskey.radio.getId('r_name', '請選擇'));" /> getId(name, '請選擇')<br />
    <input type="button" value="被選中選項的值" onclick="alert($jskey.radio.getValue('r_name', '請選擇'));" /> getValue(name, '請選擇')<br /><br />
    <input id="doCheckID" type="checkbox" /><label for="doCheckID">是否不可選</label> 選中值：<input id="doCheckText" type="text" style="width:50px;" value="v5" title="請輸入您需要選中的默認值" /><br />
    <input type="button" value="選中指定值" onclick="alert($jskey.radio.reselect('r_name', document.getElementById('doCheckText').value, document.getElementById('doCheckID').checked));" /> reselect:function(name, defaultValue, isDisabled)<br /><br />
    <input type="button" value="還原" onclick="$jskey.radio.reselect('r_name', null, false);" /> reselect(name, null, false)<br />
    <input type="button" value="清除" onclick="$jskey.radio.reset('r_name', null);" /> reset(name), reset(name, false), reset(name, true)<br />

    <br /><hr /><br />

    <pre>
         /* *
         * 調用對象：$jskey.radio
          */

         /* ************************************************************ */
         /* 調用方法 */
         /* ************************************************************ */

         /* *
         * 返回指定單選框組被選中的選項信息{id:"",value:""}(必須有ID屬性),沒有選中則返回null
         * name:單選框組名
         * showMessage:沒有選中時的提示信息(為空則不提示)
          */
        getSelected: function(name, showMessage)

         /* *
         * 根據單選框組名取得選中的ID,沒有選中則返回defaultValue
         * name:單選框組名
          */
        getId: function(name, defaultValue)

         /* *
         * 根據單選框組名取得選中的值,沒有選中則返回defaultValue
         * name:單選框組名
          */
        getValue: function(name, defaultValue)

         /* *
         * 根據單選框組名與指定值進行重選,如果存在該指定值則選中指定值,沒有值被選中,默認選中第一項
         * name:單選框組名
         * defaultValue:指定值
         * isDisabled:是否使其它值為不可選狀態
          */
        reselect: function(name, defaultValue, isDisabled)

         /* *
         * 重置單選框組
         * name:單選框組名
         * isDisabled:是否使其它值為不可選狀態
          */
        reset: function(name, isDisabled)
         /* ************************************************************ */
    </pre>
</div>

<br /><br />

<div class="box">
    <div class="title">select</div>

    <br /><hr /><br />

    <table style="width:500px;">
        <tr>
            <td>
                A1<br/>
                <select id="s_id_a1" multiple="multiple" size="15" style="height:200px;width:200px;">
                    <option value="a1">選項A1</option>
                    <option value="a2">選項A2</option>
                    <option value="a3">選項A3</option>
                    <option value="a4">選項A4</option>
                    <option value="a5">選項A5</option>
                    <option value="a6">選項A6</option>
                    <option value="a7">選項A7</option>
                    <option value="a8">選項A8</option>
                    <option value="a9">選項A9</option>
                    <option value="a0">選項A0</option>
                </select>
            </td>
            <td>
                A2<br/>
                <select id="s_id_a2" multiple="multiple" size="15" style="height:200px;width:200px;">
                </select>
            </td>
        </tr>
    </table><br />
    <input type="button" value="A1選中的復制到A2,不清空A2" onclick="$jskey.select.copy('s_id_a1', 's_id_a2', true, false);" /> copy(fromID, toID, isSelected, isClear)<br />
    <input type="button" value="A1選中的復制到A2,先清空A2" onclick="$jskey.select.copy('s_id_a1', 's_id_a2', true, true);" /> copy(fromID, toID, isSelected, isClear)<br />
    <input type="button" value="反選A1的選中項" onclick="$jskey.select.reselect('s_id_a1', null);" /> reselect(id, isChecked)<br />
    <input type="button" value="全選A1的項" onclick="$jskey.select.reselect('s_id_a1', true);" /> reselect(id, isChecked)<br />
    <input type="button" value="不選A1的項" onclick="$jskey.select.reselect('s_id_a1', false);" /> reselect(id, isChecked)<br />

    <br /><hr /><br />

    <table style="width:500px;">
        <tr>
        <td>
            A3<br/>
            <select id="s_id_a3" multiple="multiple" size="15" style="height:200px;width:200px;">
                <option value="a1">選項A1</option>
                <option value="a2">選項A2</option>
                <option value="a3">選項A3</option>
                <option value="a4">選項A4</option>
                <option value="a5">選項A5</option>
                <option value="a6">選項A6</option>
                <option value="a7">選項A7</option>
                <option value="a8">選項A8</option>
                <option value="a9">選項A9</option>
                <option value="a0">選項A0</option>
            </select>
        </td>
        <td>
            A4<br/>
            <select id="s_id_a4" multiple="multiple" size="15" style="height:200px;width:200px;">
            </select>
        </td>
        </tr>
    </table><br />
    <input type="button" value="A3選中的移到A4,並移除" onclick="$jskey.select.swap('s_id_a3', 's_id_a4', true);" /> swap(fromID, toID, isSelected)<br />
    <input type="button" value="A4全部的移到A3,並移除" onclick="$jskey.select.swap('s_id_a4', 's_id_a3', false);" /> swap(fromID, toID, isSelected)<br />
    <input type="button" value="判斷A4中是否存在"a8(選項A8)"" onclick="alert($jskey.select.exist('s_id_a4', 'a8')?"存在":"不存在");" /> exist(id, value)<br />

    <br /><hr /><br />

    <table style="width:500px;">
        <tr>
            <td>
                A5<br/>
                <select id="s_id_a5" multiple="multiple" size="15" style="height:200px;width:200px;">
                    <option value="a2">選項A2</option>
                    <option value="a6">選項A6</option>
                    <option value="a7">選項A7</option>
                    <option value="a8">選項A8</option>
                    <option value="a3">選項A3</option>
                    <option value="a0">選項A0</option>
                    <option value="a4">選項A4</option>
                    <option value="a5">選項A5</option>
                    <option value="a9">選項A9</option>
                    <option value="a1">選項A1</option>
                </select>
            </td>
            <td>
                <select id="moveCount">
                    <option value="1">1步</option>
                    <option value="2" selected="selected">2步</option>
                    <option value="3">3步</option>
                </select><br />
                <input type="button" value="A5選中的移到頂" onclick="$jskey.select.move('s_id_a5', 0, true);" /><br />
                <input type="button" value="A5選中的向上移N步" onclick="$jskey.select.move('s_id_a5', document.getElementById('moveCount').value, true);" /><br />
                <input type="button" value="A5選中的向下移N步" onclick="$jskey.select.move('s_id_a5', document.getElementById('moveCount').value, false);" /><br />
                <input type="button" value="A5選中的移到尾" onclick="$jskey.select.move('s_id_a5', 0, false);" /><br />
                move(id, count, isWay)<br/>
            </td>
        </tr>
    </table>

    <br /><hr /><br />

    <table style="width:500px;">
        <tr>
            <td>
                A6<br/>
                <select id="s_id_a6" multiple="multiple" size="15" style="height:200px;width:200px;">
                    <option value="a1">選項A1</option>
                    <option value="a2">選項A2</option>
                    <option value="a3">選項A3</option>
                    <option value="a4">選項A4</option>
                    <option value="a5">選項A5</option>
                    <option value="a6">選項A6</option>
                    <option value="a7">選項A7</option>
                    <option value="a8">選項A8</option>
                    <option value="a9">選項A9</option>
                    <option value="a0">選項A0</option>
                </select>
            </td>
            <td>
                value:<input id="myv" type="text" value="a3" /><br />
                text :<input id="myt" type="text" value="選項A3" /><br />
                <input type="button" value="判斷存在再添加" onclick="if(!($jskey.select.exist('s_id_a6', document.getElementById('myv').value))){$jskey.select.add('s_id_a6', document.getElementById('myv').value, document.getElementById('myt').value);}else{alert('已經存在該值');}" /><br />
                <input type="button" value="直接添加" onclick="$jskey.select.add('s_id_a6', document.getElementById('myv').value, document.getElementById('myt').value);" /><br />
                <input type="button" value="刪除選中" onclick="$jskey.select.remove('s_id_a6', true);" /><br />
                exist(id, value)<br />
                add(id, text, value)<br />
                remove(id, isSelected)<br />
            </td>
        </tr>
    </table>

    <br /><hr /><br />

    <pre>
         /* *
         * 調用對象：$jskey.select
          */

         /* ************************************************************ */
         /* 調用方法 */
         /* ************************************************************ */

         /* *
         * 判斷相應的選項值是否在下拉框中存在
         * id:下拉框對象ID
         * optionValue:用於比較的值
          */
        exist(id, value)

         /* *
         * 添加一個選項
         * id:下拉框對象ID
         * text:顯示值
         * value:選項值
          */
        add(id, text, value)

         /* *
         * 將來源下拉框中的選項,復制到目標下拉框
         * fromID:來源下拉框對象ID
         * toID:目標下拉框對象ID
         * isSelected:狀態,添加選中項[true]/添加全部項[false]
         * isClear:復制前是否清空目標下拉框,清空[true]/保留[false]
          */
        copy(fromID, toID, isSelected, isClear)

         /* *
         * 移動選中的選項
         * id:下拉框對象ID
         * count:數字,移動的長度(0則根據isWay移到最上/最下)
         * isWay:是否向上移(向上移[true],向下移[false])
          */
        move(id, count, isWay)

         /* *
         * 移除選項
         * id:下拉框對象ID
         * isSelected:狀態,移除選中項[true]/移除全部項[false]
          */
        remove(id, isSelected)

         /* *
         * 根據指定的狀態重選目標下拉框選項
         * selectObject:下拉框對象取消選中相應列表中的全部項選中相應列表中的全部項
         * isChecked:狀態,全選[true/false]/反選[null]
          */
        reselect(id, isChecked)
         /* ************************************************************ */
    </pre>
</div>

<br /><br />

</body>
</html>

新版下載和更新地址

http://www.cnblogs.com/skey_chen/archive/2012/07/18/2596926.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Selenium—選擇框的相關操作（單選框、多選框、復選框、下拉框） Vue —— 復選框、單選框、下拉框單選框，復選框和下拉框回顯賦值問題 vue中表單的簡單應用（單選框，復選框，下拉框） html基本標簽表單實現交互原理，單選框，復選框，下拉框介紹 Android學習使用基本界面組件（下拉框，單選框，復選框，數字轉輪，滾動條）純css美化下拉框、復選框以及單選框樣式並用jquery獲取到其被選中的val Qt Quick 常用元素：RadioButton(單選框)，CheckBox(復選框) 與 GroupBox(分組框) Android開發之路——單選框,復選框,彈出框等控件操作 layui：頁面元素（輸入框、下拉選擇框、復選框、開關、單選框、文本域、導航）