zoukankan      html  css  js  c++  java
  • jQuery操作select 的option

     
    $(function(){
               $("#addip").click(function(){
                                          var $beginip1=$("#s_ip_1").val();
                                          var $beginip2=$("#s_ip_2").val();
                                          var $beginip3=$("#s_ip_3").val();
                                          var $beginip4=$("#s_ip_4").val();
                                          var $endip1=$("#e_ip_1").val();
                                          var $endip2=$("#e_ip_2").val();
                                          var $endip3=$("#e_ip_3").val();
                                          var $endip4=$("#e_ip_4").val();
                                          var $beginip=$beginip1+"."+$beginip2+"."+$beginip3+"."+$beginip4;
                                          var $endip=$endip1+"."+$endip2+"."+$endip3+"."+$endip4;
                                          //检查IP段
                                          if($beginip1>$endip1){
                                              alert("起始IP不能大于结束IP地址");
                                          }
                                          //验证数据库是否存在
                                          
                                          //添加到select的选项
                                          if($("#ip_type:checked").val()=="1"){
                                              //IP段
                                              $("#limit_ip_list").append("<option value='"+$beginip+"~"+$endip+"'>"+$beginip+"~"+$endip+"</option>");
                                          }else{
                                              $("#limit_ip_list").append("<option value='"+$beginip+"'>"+$beginip+"</option>");
                                          }
                                          });
    });

    <table cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td colspan="2"><input type="radio" name="ip_type" id="ip_type" value="1" checked="checked"/>
                IP段
                <input type="radio" name="ip_type" id="ip_type" value="0" />
                IP值</td>
              <td>被限制的IP列表</td>
              <td></td>
            </tr>
            <tr>
              <td><input name="s_ip_1" id="s_ip_1" type="text" size="4" value="192">
                .
                <input name="s_ip_2" id="s_ip_2"  type="text" size="4" value="168"/>
                .
                <input name="s_ip_3" id="s_ip_3"  type="text" size="4" value="0"/>
                .
                <input name="s_ip_4" id="s_ip_4"  type="text" size="4" value="0"/></td>
              <td rowspan="3"><input type="button" name="addip" id="addip" value="=>" /></td>
              <td rowspan="3"><select style="230px" size="5" multiple="multiple" id="limit_ip_list" name="limit_ip_list">
                  <option value="192.168.1.0~192.168.1.255">192.168.1.0~192.168.1.255</option>
                  <option value="192.168.0.100">192.168.0.100</option>
                </select></td>
              <td rowspan="3"> 可双击删除<br />
                <input type="button" name="delip" id="delip" value="删除选择" /></td>
            </tr>
            <tr>
              <td align="center" bgcolor="#FFFFFF">~</td>
              <td></td>
            </tr>
            <tr>
              <td bgcolor="#FFFFFF"><input name="e_ip_1" id="e_ip_1"  type="text" size="4" value="192">
                .
                <input name="e_ip_2" id="e_ip_2" type="text" size="4" value="168"/>
                .
                <input name="e_ip_3" id="e_ip_3" type="text" size="4" value="0"/>
                .
                <input name="e_ip_4" id="e_ip_4" type="text" size="4" value="0"/></td>
              <td></td>
            </tr>
          </table>

  • 相关阅读:
    ruby on rails爬坑(三):图片上传及显示
    js 实现图片实时预览
    Rails中的content_tag与concat用法,可以连接任意html元素
    rspec中的shared_examples与shared_context有什么不同
    RSpec shared examples with template methods
    How to Test Controller Concerns in Rails 4
    JMeter压力测试入门教程[图文]
    京东后台图片优化技巧
    程序猿,千万别说你不了解Docker!
    DIV+CSS:页脚永远保持在页面底部
  • 原文地址:https://www.cnblogs.com/hakuci/p/2227410.html
Copyright © 2011-2022 走看看