<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 + "
" +
                    "获取第一个值：" + firstText + "
" +
                    "获取最后一个值：" + lastText + "
" +
                    "获取Select选择的Value：" + selectValue + "
" +
                    "获取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>
}