Html中Select的增刪改查排序，和jQuery中的常用功能

這里主要通過select引出常用的jquery

前台頁面

<select class="form-control" id="commonSelect">
    @*multiple="multiple" 多選  *@
    <option value="1">選擇一</option>
    <option value="2">選擇二</option>
    <option value="3">選擇三</option>
</select>
<br />
<button class="btn btn-default" type="button" id="selectTextAndValueButton">js獲取Select選擇的Text和Value</button>
<button class="btn btn-default" type="button" id="selectModifyButton">添加/刪除Select的Option項</button>
<button class="btn btn-default" type="button" id="originalSelectButton">還原Select</button>
<br /><br />
<button class="btn btn-default" type="button" id="dictChangeSelectButton">Js中字典的使用</button>
<button class="btn btn-default" type="button" id="arrayChangeSelectButton">Js中數組的使用</button>
<button class="btn btn-default" type="button" id="jsConditionButton">Js中條件語句的使用</button>
<br /><br />
<button class="btn btn-default" type="button" id="filterArrayButton">Js中grep的使用</button>
<button class="btn btn-default" type="button" id="sortSelectButton">排序</button>

先定義

 var oCommonSelect = $("#commonSelect");

js獲取Select選擇的Text和Value

    var checkText = oCommonSelect.find("option:selected").text(); //獲取Select選擇的Text
    //var checkText = $("#commonSelect option:selected").text()//和上面一句效果一樣
    var firstText = oCommonSelect.find("option:first").text();//獲取第一個值
    var lastText = oCommonSelect.find("option:last").text();//獲取最后一個值
    var selectValue = oCommonSelect.val(); //獲取Select選擇的Value
    var selectIndex = oCommonSelect.get(0).selectedIndex; //獲取Select選擇的索引值

    console.log("獲取Select選擇的Text：" + checkText + "\n" +
        "獲取第一個值：" + firstText + "\n" +
        "獲取最后一個值：" + lastText + "\n" +
        "獲取Select選擇的Value：" + selectValue + "\n" +
        "獲取Select選擇的索引值：" + selectIndex
        );
}

還原Select

var originalSelect = function () {
    oCommonSelect.html("");
    oCommonSelect.append('<option value="1">選擇一</option>');
    oCommonSelect.append('<option value="2">選擇二</option>');
    oCommonSelect.append('<option value="3">選擇三</option>');
}

Js中字典的使用

var dictChangeSelect = function () {
    var selectDict = new Object();
    selectDict["value1"] = "一";
    selectDict["value2"] = "二";
    selectDict["value3"] = "三";
    oCommonSelect.html("");
    $.each(selectDict, function (index, option) {
        oCommonSelect.append('<option value="' + index + '">' + option + '</option>');
    });
}

Js中數組的使用

var arrayChangeSelect = function () {
    var selectArray = [];//var selectArray = ['一','二','三'];效果一樣
    selectArray.push("一"); //selectArray.pop(0)
    selectArray.push("二");
    selectArray.push("三");
    oCommonSelect.html("");
    $.each(selectArray, function (index, option) {
        oCommonSelect.append('<option value="' + index + '">' + option + '</option>');
    });
}

Js中條件語句的使用

var jsCondition = function () {
    if (1 == 1) {
        console.log("1==1 :true");
    }

    for (var i = 0; i < 2; i++) {
        console.log("for中i= " + i);
    }

    var forArray = [1, 2];
    for (var value in forArray) {
        console.log("for中value= " + i);
    }

    switch (2) //括號里的也可以是字符串等
    {
        case 1:
            console.log("switch 1");
            break;
        case 2:
            console.log("switch 2");
            break;
        default:
            break;
    }
}

Js中grep的使用

 var filterArray = function () {
    var array = [1, 2, 3, 4, 5, 6, 7];
    var filter = $.grep(array, function (value) {
        return value > 5;//篩選出大於5的
    });
    console.log("array" + array);
    console.log("filter" + filter);
}

appendTo如果目標為單個對象的話，就執行移動操作，所以排序后的option在添加到自身的select前，不用清空當前的select

var sortSelect = function () {
    oCommonSelect.find("option").sort(function (a, b) {
        var aText = $(a).text().toUpperCase();
        var bText = $(b).text().toUpperCase();
        if (aText > bText) return 1;
        if (aText < bText) return -1;
        return 0;
    }).appendTo('select');
}

 

<h2>CommonUseJs</h2>
<select class="form-control" id="commonSelect">
    @*multiple="multiple" 多選  *@
    <option value="1">選擇一</option>
    <option value="2">選擇二</option>
    <option value="3">選擇三</option>
</select>
<br />
<button class="btn btn-default" type="button" id="selectTextAndValueButton">js獲取Select選擇的Text和Value</button>
<button class="btn btn-default" type="button" id="selectModifyButton">添加/刪除Select的Option項</button>
<button class="btn btn-default" type="button" id="originalSelectButton">還原Select</button>
<br /><br />
<button class="btn btn-default" type="button" id="dictChangeSelectButton">Js中字典的使用</button>
<button class="btn btn-default" type="button" id="arrayChangeSelectButton">Js中數組的使用</button>
<button class="btn btn-default" type="button" id="jsConditionButton">Js中條件語句的使用</button>
<br /><br />
<button class="btn btn-default" type="button" id="filterArrayButton">Js中grep的使用</button>
<button class="btn btn-default" type="button" id="sortSelectButton">排序</button>

@section scripts{
    <script>
        $(document).ready(function () {
            var oCommonSelect = $("#commonSelect");

            oCommonSelect.change(function () {
                console.log("為Select添加事件，當選擇其中一項時觸發");
            });
            //oCommonSelect.on("change", function () { });//和上面的效果一樣

            //js獲取Select選擇的Text和Value
            var selectTextAndValue = function () {
                var checkText = oCommonSelect.find("option:selected").text(); //獲取Select選擇的Text
                //var checkText = $("#commonSelect option:selected").text()//和上面一句效果一樣
                var firstText = oCommonSelect.find("option:first").text();//獲取第一個值
                var lastText = oCommonSelect.find("option:last").text();//獲取最后一個值
                var selectValue = oCommonSelect.val(); //獲取Select選擇的Value
                var selectIndex = oCommonSelect.get(0).selectedIndex; //獲取Select選擇的索引值

                console.log("獲取Select選擇的Text：" + checkText + "\n" +
                    "獲取第一個值：" + firstText + "\n" +
                    "獲取最后一個值：" + lastText + "\n" +
                    "獲取Select選擇的Value：" + selectValue + "\n" +
                    "獲取Select選擇的索引值：" + selectIndex
                    );
            }

            //添加/刪除Select的Option項
            var selectModify = function () {
                oCommonSelect.append("<option value='4'>Text4</option>"); //為Select追加一個Option(下拉項)
                oCommonSelect.prepend("<option value='-1'>請選擇</option>"); //為Select插入一個Option(第一個位置)
                oCommonSelect.find("option:last").remove(); //刪除Select中索引值最大Option(最后一個)
                oCommonSelect.find("option[value='1']").remove(); //刪除Select中Value='1'的Option
                //oCommonSelect.empty();//清空
            }

            //還原Select
            var originalSelect = function () {
                oCommonSelect.html("");
                oCommonSelect.append('<option value="1">選擇一</option>');
                oCommonSelect.append('<option value="2">選擇二</option>');
                oCommonSelect.append('<option value="3">選擇三</option>');
            }

            //Js中字典的使用
            var dictChangeSelect = function () {
                var selectDict = new Object();
                selectDict["value1"] = "一";
                selectDict["value2"] = "二";
                selectDict["value3"] = "三";
                oCommonSelect.html("");
                $.each(selectDict, function (index, option) {
                    oCommonSelect.append('<option value="' + index + '">' + option + '</option>');
                });
            }

            //Js中數組的使用
            var arrayChangeSelect = function () {
                var selectArray = [];//var selectArray = ['一','二','三'];效果一樣
                selectArray.push("一"); //selectArray.pop(0)
                selectArray.push("二");
                selectArray.push("三");
                oCommonSelect.html("");
                $.each(selectArray, function (index, option) {
                    oCommonSelect.append('<option value="' + index + '">' + option + '</option>');
                });
            }

            //Js中條件語句的使用
            var jsCondition = function () {
                if (1 == 1) {
                    console.log("1==1 :true");
                }

                for (var i = 0; i < 2; i++) {
                    console.log("for中i= " + i);
                }

                var forArray = [1, 2];
                for (var value in forArray) {
                    console.log("for中value= " + i);
                }

                switch (2) //括號里的也可以是字符串等
                {
                    case 1:
                        console.log("switch 1");
                        break;
                    case 2:
                        console.log("switch 2");
                        break;
                    default:
                        break;
                }
            }

            //Js中grep的使用
            var filterArray = function () {
                var array = [1, 2, 3, 4, 5, 6, 7];
                var filter = $.grep(array, function (value) {
                    return value > 5;//篩選出大於5的
                });
                console.log("array" + array);
                console.log("filter" + filter);
            }

            var sortSelect = function () {
                oCommonSelect.find("option").sort(function (a, b) {
                    var aText = $(a).text().toUpperCase();
                    var bText = $(b).text().toUpperCase();
                    if (aText > bText) return 1;
                    if (aText < bText) return -1;
                    return 0;
                }).appendTo('select');
                // appendTo如果目標為單個對象的話，就執行移動操作，所以排序后的option在添加到自身的select前，不用清空當前的select
            }

            var oSelectTextButton = $("#selectTextAndValueButton"),
                oSelectModifyButton = $("#selectModifyButton"),
                oOriginalSelectButton = $("#originalSelectButton"),
                oDictChangeSelectButton = $("#dictChangeSelectButton"),
                oArrayChangeSelectButton = $("#arrayChangeSelectButton"),
                oJsConditionButton = $("#jsConditionButton"),
                oFilterArrayButton = $("#filterArrayButton"),
                oSortSelectButton=$("#sortSelectButton");

            oSelectTextButton.on("click", function () { selectTextAndValue();});
            oSelectModifyButton.on("click", function () { selectModify();});
            oOriginalSelectButton.on("click", function () { originalSelect();});
            oDictChangeSelectButton.on("click", function () { dictChangeSelect(); });
            oArrayChangeSelectButton.on("click", function () { arrayChangeSelect(); });
            oJsConditionButton.on("click", function () { jsCondition(); });
            oFilterArrayButton.on("click", function () { filterArray();});
            oSortSelectButton.on("click", function () { sortSelect(); });
        });
    </script>
}

HTML 基礎篇

http://www.cnblogs.com/suoning/p/5614372.html

http://www.cnblogs.com/suoning/p/5625582.html

史上最全、JavaScript基礎篇

http://www.cnblogs.com/suoning/p/5656403.html

DOM、BOM 操作超級集合

http://www.cnblogs.com/suoning/p/5656922.html

 jQuery實例大全

http://www.cnblogs.com/suoning/p/5683047.html