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值
|---------------------------------------------------------------------------------
*/
$('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属性，通过添加移除该属性 来标志选中
|---------------------------------------------------------
*/
$('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新的文字
|
|---------------------------------------------------------------------------------------
*/
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标签的组合，没有发现存在任何的问题。

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

 

Refer：什么是Ajax

Link: https://www.cnblogs.com/farwish/p/3889697.html