Ajax与select标签的组合运用

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

如下包含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标签的组合，没有发现存在任何的问题。

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

Ajax与select标签的组合运用,布布扣,bubuko.com