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

2023-09-19 阅读 20 评论 0

摘要：这里主要通过select引出常用的jquery 前台页面 <select class="form-control" id="commonSelect">@*multiple="multiple" 多选 *@<option value="1">选择一</option><option value="2&

这里主要通过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选择的Valuevar 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>');
}

php增删改查？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和Valuevar 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选择的Valuevar 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();//清空
            }//还原Selectvar 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>
}