首页 > 代码库 > 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">备&nbsp;&nbsp;&nbsp;&nbsp;注</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‘ />&nbsp;<span class=‘cs‘>*</span>手机号码&nbsp;&nbsp;";          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);                    }                }            });        }