Ajax與select標籤的組合運用

標籤：style   blog   http   color   使用   os   io   資料   

-------------------------------------------------------------------------------------------------------

如下包含select的表單，使用Ajax提交表單資料：

<form>    <select name="id">        <option value="0">無</option>        <option value="1">選項一</option>        <option value="2">預設二</option>        <option value="3">預設三</option>    </select>    <button>提交</button></form>

 

/*
|---------------------------------------------------------------------------------
|思路一：使用change事件，通過設定第一個option的value值，提交時固定擷取第一個option的value值
|@黑眼詩人 <www.chenwei.ws>
|---------------------------------------------------------------------------------
*/
$(‘select‘).change(function(){   var options = $("select").children();      //所有option對象    oThis = $(this);　　　　　　　　　　　　　　　　//當前option對象   $(‘select‘).children(‘option:eq(0)‘).val(oThis.val());//設定第一個option的value值

　　var id = oThis.val();　　//第一個option的value值
　　var text = oThis.text();//選擇的option文字
   $(‘button‘).click(function(){
　　　　$.post(‘www.chenwei.ws‘, {id:id, text:text}, function(data){
　　　　　　//...........
　　　　});
　　});
})

存在的問題：1.當使用chang事件，再次選擇預設option為‘無‘的情況，第一個option的value值不再變為0

/*
|---------------------------------------------------------
|思路二：使用option的selected屬性，通過添加移除該屬性 來標誌選中
|@黑眼詩人 <www.chenwei.ws>
|---------------------------------------------------------
*/
$(‘select‘).children().click(function(data){　　var options = $(‘select‘),children();　　oThis = $(this);　　options.removeAttr(‘selected‘);　　oThis.attr({selected:‘true‘});　　var id = oThis.val();　　var text = $("option[selected=‘true‘]").text();　　$(‘button‘).click(function(){　　　　$.post(‘www.chenwei.ws‘, {id:id, text:text}, function(data){　　　　　//............　　　　});　　});})存在的問題：1.會改變原有select機制,選中的值無法顯示

/*
|---------------------------------------------------------------------------------------
|思路三：不作更改操作，直接擷取select標籤的id值，文字為預設的option的文字，點擊時擷取option新的文字
|@黑眼詩人 <www.chenwei.ws>|---------------------------------------------------------------------------------------
*/
var select = $(‘select‘);var option = select.children(‘option:eq(0)‘);var detail = option.text();    //初始文字
select.children().click(function(){　　detail = $(this).text();    //如果有修改，動態擷取文字});        $(‘button‘).click(function(){   var id = select.val();      //直接擷取select的id即為提交的id   var detail = detail;   $.post(‘www.chenwei.ws‘, {id:id, detail:detail}, function(data){       //.............   })});

使用‘思路三‘實現的Ajax提交與select標籤的組合，沒有發現存在任何的問題。

--------------------------------------------------------------------------------------------------------