JQuery 对 Select option 的操作

浏览数：16 / 时间：2015年06月09日 
<select id="selectID" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="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="0">--请选择--</option>
                                <%
                                List<类名> blocks = (List<类名>)ViewData["blocks"];
                                foreach (类名 item in blocks)
                                {
                                    %>
                                    <option value="<%=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="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 = $("#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=‘7‘>7</option>");
    }
    function ee() {
        //在下拉框最前添加一个选项
        $("#selectID").prepend("<option value=‘0‘>0</option>")
    }
    function ff() {
        //移除下拉框最后一个选项
        $("#selectID option:last").remove();
    }

    function gg() {
        //移除下拉框 index属性为1的选项
        $("#selectID option[index=1]").remove();
    }

    function hh() {
        //移除下拉框 value属性为4的选项
        $("#selectID option[value=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=‘‘ />&nbsp;<span class=‘cs‘>*</span>姓 名&nbsp;&nbsp;";
          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);
                    }
                }
            });

        }




 
JQuery 对 Select option 的操作,古老的榕树,5-wow.com


          

            

              
              郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
            

          


          


          

            标签： 
            class
            
            style
            
            java
            
            html
            
            数据
            
            方法
            
            com
            
            log
            
            class
            
            style
            
            java
            
            html
            
            数据
            
            方法
            
            com
            
            log
            
            
            
          


          

            

              
相关文章

              
    
                
              

            

            

              
随机文章

              
            

          



          

            

              
您可能还喜欢

              
    
                
              

            


            

              
您可能还喜欢