首页 > 代码库 > JQuery 对 Select option 的操作
JQuery 对 Select option 的操作
<select id="selectID" > <option value=http://www.mamicode.com/"1">1</option> <option value=http://www.mamicode.com/"2">2</option> <option value=http://www.mamicode.com/"3">3</option> <option value=http://www.mamicode.com/"4">4</option> <option value=http://www.mamicode.com/"5">5</option> <option value=http://www.mamicode.com/"6">6</option> </select>
页面:
<table class="tj_tb"> <tr> <td class="tj_l">NAME</td> <td> <select class="dkcp_dk" name="block" id="block" "> <option value=http://www.mamicode.com/"0">--请选择--</option> <% List<类名> blocks = (List<类名>)ViewData["blocks"]; foreach (类名 item in blocks) { %> <option value=http://www.mamicode.com/"<%=item.BlockID.RowId %>"><%=item.BlockID.BlockName %></option> <% } %> </select> </td> </tr> <tr style="height:20px;"> <td colspan="2"></td> </tr> <tr> <td class="tj_l">备 注</td> <td><textarea class="tarea" name="remark" id="remark" cols="" rows=""></textarea><br /> <span id="maxLimitSpan2" style="color:Red;font-size:12px;">0/100</span> <span style="color:#999;font-size:12px;">* 您最多可以输入100个文字</span> <script type="text/javascript"> function maxLimit2() { var num = $(this).val().substr(0, 100); $(this).val(num); $("#maxLimitSpan2").text($(this).val().length + "/100"); }; $("#maxLimitSpan2").text($("#remark").val().length + "/100"); $("#remark").keyup(maxLimit2); //调用方法 </script></td> </tr> </table> <a class="tj" href=http://www.mamicode.com/"javascript:void(0);" onclick="jjr_qyx_mf_post();">提交信息</a>
操作一: 1: //绑定下拉框change事件,当下来框改变时调用 SelectChange()方法 $("#selectID").change(function() { SelectChange(); }); }) <script language="javascript"> $(document).ready(function() { //绑定下拉框change事件,当下来框改变时调用 SelectChange()方法 $("#selectID").change(function() { SelectChange(); }); }) function SelectChange() { //获取下拉框选中项的text属性值 var selectText = $("#selectID").find("option:selected").text(); alert(selectText); //获取下拉框选中项的value属性值 var selectValue = http://www.mamicode.com/$("#selectID").val(); alert(selectValue); //获取下拉框选中项的index属性值 var selectIndex = $("#selectID").get(0).selectedIndex; alert(selectIndex); ////获取下拉框最大的index属性值 var selectMaxIndex = $("#selectID option:last").attr("index"); alert(selectMaxIndex); } function aa() { //设置下拉框index属性为5的选项 选中 $("#selectID").get(0).selectedIndex = 5; } function bb() { //设置下拉框value属性为4的选项 选中 $("#selectID").val(4); } function cc() { //设置下拉框text属性为5的选项 选中 $("#selectID option[text=5]").attr("selected", "selected"); $("#yyt option:contains(‘5‘)").attr("selected", true); } function dd() { //在下拉框最后添加一个选项 $("#selectID").append("<option value=http://www.mamicode.com/‘7‘>7"); } function ee() { //在下拉框最前添加一个选项 $("#selectID").prepend("<option value=http://www.mamicode.com/‘0‘>0") } function ff() { //移除下拉框最后一个选项 $("#selectID option:last").remove(); } function gg() { //移除下拉框 index属性为1的选项 $("#selectID option[index=1]").remove(); } function hh() { //移除下拉框 value属性为4的选项 $("#selectID option[value=http://www.mamicode.com/4]").remove(); } function ii() { //移除下拉框 text属性为5的选项 $("#selectID option[text=5]").remove(); } </script> /*追加添加客户信息*/ function AddCustomer() { if ($("input[type=‘checkbox‘][name=‘fxk‘]").length>= 5) { alert("最多只能批量添加五条推荐客户信息!"); return false; } var html="<li>"; html += "<input class=‘fxk‘ name=‘fxk‘ type=‘checkbox‘ value=http://www.mamicode.com/‘‘ /> *姓 名 "; html += "<input class=‘inpt‘ name=‘cusName‘ type=‘text‘ /> <span class=‘cs‘>*</span>手机号码 "; html += "<input class=‘inpt‘ name=‘cusPhone‘ type=‘text‘ />"; html += "</li>" $("#myul").append(html); } /*移除勾选的客户信息*/ function DeleteCustomer() { if ($("input[type=‘checkbox‘][name=‘fxk‘]:checked").length == 0) { alert("请选择一组要删除的数据!"); return false; } if ($("input[type=‘checkbox‘]:checked").length >= $("input[type=‘checkbox‘]").length) { alert("提示:不可全部删除信息,至少保留一条客户信息!"); return false; } $("#myul").each(function () { $("input[type=‘checkbox‘][name=‘fxk‘]:checked").each(function () { $(this).parent().remove(); }); }); } /*显示对应楼盘的详情介绍---begain--------------------*/ $("#block").change(function () { //获取下拉框选中项的text属性值 var blockName = $("#block").find("option:selected").text(); //获取下拉框选中项的value属性值 var blockId = $("#block").val(); $("#mydiv").show(); if (blockId > 0) { /*显示楼盘信息*/ $.ajax({ type: "POST", url: "/BM/GetBlockInformation", dataType: "text", async: false, data: { ‘blockId‘: blockId }, error: function (XMLHttpRequest, textStatus, errorThrown) { }, success: function (msg) { // $(".jjr_lpxxtab").replaceWith("<div class=‘jjr_lpxxtab‘ id=‘mydiv‘>" + msg + "<div>"); $("#mydiv").html(msg); } }); } else { $(".jjr_lpxxtab").html(‘ <span id="maxLimitSpan2" style="color:Red;font-size:12px;">暂无楼盘详情</span>‘); } }); /*----------------------end------------------------*/ function jjr_qyx_mf_post() { var cusNames = ""; var cusPhones = ""; /*循环验证客户姓名*/ //var checkInfo = true; var msgNames = ""; var msgPhone = ""; $("input[type=‘text‘][name=‘cusName‘]").each(function () { var cusName = $(this).val(); var index = $("input[type=‘text‘][name=‘cusName‘]").index($(this)) + 1; if (empty(cusName)) { msgNames += "第" + index + "个客户姓名不可为空!\r\n"; } else{ var reg22 = /^[\u4e00-\u9fa5]+$/gi; if (!reg22.test(cusName)) { msgNames += "第" + index + "个客户姓名必须为中文!\n"; } else { cusNames = cusNames + cusName + ‘,‘; } } }); /*循环验证手机号码*/ $("input[type=‘text‘][name=‘cusPhone‘]").each(function () { var cusPhone = $(this).val(); var index = $("input[type=‘text‘][name=‘cusPhone‘]").index($(this)) + 1; if (empty(cusPhone)) { msgNames += "第" + index + "个客户手机号码不可为空!\r\n"; } else { var checkMob = /^(1[0-9])\d{9}$/; //手机号码检测 if ($.trim(cusPhone).length != 11) { // msgPhone += "手机号码为11位!"; msgNames += "第" + index + "个客户手机号码要为11位!\r\n" } else if (!checkMob.test($.trim(cusPhone))) { msgNames += "第" + index + "个客户手机号码输入有误,重新输入!\r\n"; } else { //重复数据 if (cusPhones.indexOf(cusPhone) >= 0) { msgNames += "第" + index + "个客户手机号码输入与上面信息重复,重新输入!\r\n"; } else { cusPhones = cusPhones + cusPhone + ‘,‘; } } } }); //debugger; if (msgNames != "") { alert(msgNames ); return false; } if (msgPhone != "") { alert(msgPhone); return false; } var block = $.trim($("#block").val()); if (empty(block)) { alert("请选择意向楼盘!"); return false; } if (parseFloat(block) <= 0) { alert("请选择意向楼盘!"); return false; } var remark = $.trim($("#remark").val()); $.ajax({ type: "POST", url: "/BM/RecommendBuyHousePost", dataType: "text", async: false, data: { cusNames: cusNames, cusPhones: cusPhones, blockId: block, remark: remark }, error: function (XMLHttpRequest, textStatus, errorThrown) { }, success: function (msg) { if (msg == -1) location.href = "/BM/Login"; else if (msg == 1) { alert("请选择意向楼盘!"); } else if (msg == 0) { alert("购房推荐信息已成功提交!"); window.location.replace(window.location.href);// alert($("input[type=‘checkbox‘][name=‘fxk‘]").length);// // window.location = window.location;// $("input[type=‘checkbox‘][name=‘fxk‘]").each(function () {// alert($(this).parent().attr("id"));// if ($(this).parent().attr("id") != "first") {// $(this).parent().remove();// }// else {// $(this).parent().find("input[type=‘text‘][name=‘cusName‘]").val("");// $(this).parent().find("input[type=‘text‘][name=‘cusPhone‘]").val("");// }// });// $("#remark").val("");// $("#maxLimitSpan2").text("0/100");// $("#mydiv").hide();// $("#block option:first").prop("selected", ‘selected‘); } else { alert(msg); } } }); }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。