Fork me on GitHub
凌风95
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

 

posted on 2016-07-28 23:01  lingfeng95  阅读(2515)  评论(0)  编辑  收藏  举报

Copyright © 2024 lingfeng95
Powered by .NET 9.0 on Kubernetes Powered By博客园