首先来看一下回显是什么意思?
在数据提交出现错误的时候, 已填写的信息仍在文本框中, 比如用户登录, 当用户输入错误的密码之后, 用户名仍在文本框, 只是密码框清空.
对于一些要填写很多信息的表单, 如果因为一些错误导致已经填写的整个表单信息重新填写, 对于用户非常地不友好.
jQuery 回显也是这个意思, 那么它该如何实现呢?
这里我们使用 select 下拉框进行进行演示, 希望对大家有所帮助.
html 代码:
- <label > 会议类型 </label>
- <select id="select1" name="meets.meetType"
- style="display:inline;position:relative;top:10px;margin-bottom:20px;background:grey;">
- <option value="现场会议"> 现场会议 </option>
- <option value="视频会议"> 视频会议 </option>
- <option value="语音会议"> 语音会议 </option>
- </select>
- <input type="hidden" id="meettype" value="<s:property value="meets.meetType"/>"/>
注: 这里的 input 标签是用来给 jQuery 中识别使用的.
- <s:property value="meets.meetType" />
- 这里是表示从上一层 action 中获取的相应的 meets 对象的属性 meetType. (meets 在上一层 action 中有相应的
- get,set 方法, 这是必备的, 否则不能在本代码中获取到相应的值)
下面是 jQuery 里的代码, 用来根据 HTML 中的相应的 id 获得控制:
- <script type="text/javascript">
- $(document).ready(function() {
- var nameselect=$("#meettype").val();
- var all_select=$("#select1> option");
- for(var i=0;i<all_select.length;i++){
- var svalue=all_select[i].text;
- if(nameselect==svalue){
- // 取 select 中所有的 option 的值与其进行对比, 相等则令这个 option 添加上 selected 属性
- $("#select1 option[value='"+svalue+"']").attr("selected","selected");
- }
- }
- });
- </script>
这样就大功告成了!
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/16490.html