用Jquery实现修改页面selecte标签的默认选择
2014-05-19 16:34
381 查看
通用基于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文件中,然后引用就可以!
在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文件中,然后引用就可以!
相关文章推荐
- 用Jquery实现修改页面selecte标签的默认选择
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)
- jquery实现当修改上传的图片时,默认显示当前图片的名称,当选择新的图片时,显示最新的图片名称
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面
- 修改jquery.lazyload.js实现页面延迟载入
- jQuery实现将页面上HTML标签换成另外标签的方法
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
- jQuery实现当前页面标签高亮显示的方法
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面
- 基于jquery的选择标签至文本域效果,可多选/可过滤重复/可限制个数的实现代码
- jquery/js 实现 标签 条码 一维码 Web页面 区域打印解决方案 实例
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面
- Jquery实现select选择什么,页面展现为选择的项~!
- 修改jquery.lazyload.js实现页面延迟载入
- jquery实现表单中选择框/选中按钮是否选中遍历检查(提交页面中选择题答案)
- jquery之闭包 实现无刷新修改页面
- jquery实现页面离开时检测当前页面是否被修改,修改则提示