zoukankan      html  css  js  c++  java
  • 用Jquery实现修改页面selecte标签的默认选择

    在WEB开发中,最基础的也是用的最多的就是数据库的增删改查,修改往往以为的小部分的改动,所以我们往往是在表单中填充以前的内容然后显示给用户进行修改操作。

       在填充默认内容的时候对于input标签我们往往使用value="<?php echo $value?>"的方法,例如:

    <input type='text' name='username' value='<?php echo $username?>' />

    但是对于select标签来说则没有这么简单了,因为他没有value属性。我们通常使用类似下面的代码来实现:

    <select name="catelog">
       <?php foreach($catelogList as $k=>$v){?>
       <option value="<?php echo $v['id']?>" <?php if($_GET['id']==$v['id'])echo "selected";?>><?php echo $v['catelogName']?></option>
       <?php }?>
    </select>

    这样只要我们对每个select标签都做类似的输出和判断就可以达到我们的要求了,但是略显繁杂且不便于维护。下面我提供一种用Jquery实现的方法:

    首先我们在输出select标签的时候将其默认值保存到自定义的default(其他的也可以)属性中:

    <select name="mid" default="<?php echo $_GET['id']?>">
       <?php foreach($catelogList as $k=>$v){?>
       <option value="<?php echo $v['id']?>"><?php echo $v['catelogName']?></option>
       <?php }?>
    </select>

    然后我们在文档得head中或者</body>前导入jquery库文件:

    <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>

    最后我们用js代码来实现自动为select标签选择默认项就可以了:

    <script>
    $(document).ready(function(e) {
       //调整下拉的默认选择
       $("select").each(function(index, element) {
          $(element).find("option[value='"+$(this).attr('default')+"']").attr('selected','selected');
       });
    });
    </script>

    这样一来不但看起来简洁了,而且代码通用性很高,我们把后面的这个js代码可以放到单独的通用的js文件中,然后引用就可以!

    方法仅供参考,欢迎交流!

  • 相关阅读:
    jmeter正则表达式书写
    Jmeter中if控制器的使用
    Jmeter组件之-Test Fragment(测试片段)
    Jmeter生成测试报告
    idea+maven+testng环境搭建以及基本使用
    ArrayList,HashSet,HashMap
    JAVA提供了八大基本数据类型对应的引用数据类型
    Properties解析
    JSON解析
    excel 解析
  • 原文地址:https://www.cnblogs.com/dragondean/p/selecte-default-option.html
Copyright © 2011-2022 走看看