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);

        這裡我是用Regex來找到page_size=10這個字串並將它替換成我現在選擇的值。這裡一定要注意結果要賦值給myurl，它僅僅是處理，不改變原有的字串的值。

$("#frm").attr("action",myurl); 通過attr來設定form的action屬性的值。

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

That's all...