Jquery操作select、form表单

一、问题描述

       


        需要解决的问题：上面的收缩框是一个form表单，点击确认后会将各搜索条件传递到action指定的url指向的php页面，经过处理后将搜索结果显示在本页面上，是页面刷新的形式，没有用ajax实现。在这个form有一个每页显示多少条的设置选项，现在需要解决的就是将这个控制每页显示多少条的选项移动到页面下面，和页数显示在一起。

二、解决思路

        由于要移动到页面底部，用户不能从下面选择显示多少页后再回来点击搜索吧，它必然会超出form的范围，这里就要利用Jquery来实现，当这个select控件的选择改变时，我获取现在的form中action的url，然后将里面的page_size参数截取出来，用当前的选择数目替换，然后再发送到php中处理。

三、基本HTML代码

        (1) form表单代码

<form action="{$url}#userCenter" method="post" id="frm">
<div class="rowElem clearfix mmt">
<div class="fl_l mt2">
<input type="hidden" name="page" value="{$page}">
<div class="mr_5 fl_l">
<input type="text" name="task_id" class="togg_u txt_input" value="{$_lang['please_input_task_id']}" title="{$_lang['please_input_task_id']}" size="13"/>
</div>
<div class="mr_5 fl_l">
<input type="text" name="task_title" class="togg_u txt_input" value="{$_lang['please_input_task_name']}" title="{$_lang['please_input_task_name']}"/>
</div>
<div class="fl_l">
<select class="fl_l" name="status" title="{$_lang['status']}">
<option {if !$status}selected="selected"{/if}value="">{$_lang['all']}</option>
{loop $status_arr $k $v}
<option value="$k" {if $status && $k==$status}selected="selected"{/if}>{$v}</option>
{/loop}
</select>
</div>
<div class="fl_l">
<select class="fl_l" name="ord" title="{$_lang['finan_ord']}">
{loop $ord_arr $k $v}<option value="$k" {if trim($k)==trim($ord)}selected="selected"{/if}>{$v} </option>
{/loop}
</select>
</div>
<div class="fl_l">
<button class="okl" type="submit" name="sbt_search" value="{$_lang['search']}"></button>
</div>
</div>
</form>         (2) 页面底部select控件代码
<div id="page_focus">
<select class="fl_l" name="page_size" title="{$_lang['select_page']}">
<option value="10" {if $page_size=='10'}selected="selected"{/if}>{$_lang['page_size']}10{$_lang['tiao']} </option>
<option value="20" {if $page_size=='20'}selected="selected"{/if}>{$_lang['page_size']}20{$_lang['tiao']} </option>
<option value="30" {if $page_size=='30'}selected="selected"{/if}>{$_lang['page_size']}30{$_lang['tiao']} </option>
</select>
</div>
四、Jquery实现代码与解析

$('#page_focus .fl_l').change(function(){
var myvalue = $("#page_focus .fl_l").val();
var myurl = $("#frm").attr("action");
var myspace = myurl.indexOf("page_size");
var myfinal = "page_size="+myvalue;
myurl = myurl.replace(/page_size=\d*/g,myfinal);
$("#frm").attr("action",myurl);
$("#frm").submit();
});$("#page_focus .fl_l").change();
         其中change()事件在Jquery手册中的描述为：触发每个匹配元素的change事件，这个函数会调用执行绑定到change事件的所有函数，包括浏览器的默认行为；可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。 它是我用来获取select控件改变内容时的事件，从而执行相应的函数来做相应的处理。

var  myvalue = $("#page_focus .fl_l").val()；这是用来获取select控件的值，不管是哪个option。

var  myurl = $("#frm").attr("action");

       其中attr()在Jquery手册中的描述为：attr(name)：取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。 这里我是用它来获取当前form中action的值，在我这里这是类似“index.php?do=user&view=employer&op=task&model_id=1&page_size=10&status=&page=1&ord=&task_status=”的值。

myurl = myurl.replace(/page_size=\d*/g,myfinal);

        这里我是用正则表达式来找到page_size=10这个字符串并将它替换成我现在选择的值。这里一定要注意结果要赋值给myurl，它仅仅是处理，不改变原有的字符串的值。

$("#frm").attr("action",myurl); 通过attr来设置form的action属性的值。

$("#frm").submit()；提交表单。

That's all...