javascript - 更改选择选项值时的 jQuery ajax post

Question

我使用 jQuery 来捕获用户从选择选项列表中选择参数以更改图像的值，以便可以将其设置为 0、1、2 等。

这是我的表，其中包含从数据库加载的所有数据:

  <?php if(count($local) >0 ){ 
      foreach($local as $row => $val ){ ?>

<tr>
    <td> <img src="<?php echo base_url();?>uploads/<?php echo $val['images']; ?>" width="50" height="50" /> </td>

    <td> <select id="ddlViewBy" class="ddlView" onchange="categoryIMG('<?php echo $val['images']; ?>');" name="main[<?php echo $val['id']; ?>]" >
        <option value="0" <?php if($val['main_image'] == 0){ ?> selected="selected" <?php } ?>>No</option>
        <option value="1" <?php if($val['main_image'] == 1){ ?> selected="selected" <?php } ?> >Facebook </option>
        <option value="2" <?php if($val['main_image'] == 2){ ?> selected="selected" <?php } ?> >Filosofia </option>
        <option value="3" <?php if($val['main_image'] == 3){ ?> selected="selected" <?php } ?> >Galleria </option>
    </select> </td>
</tr>

这是我在更改时调用的 jquery 代码:

function categoryIMG(id){
        var local =  <?php echo $this->id; ?>;
        var val = $('select').bind('change',function() {
            var newval = $(this).val();
            $.ajax({
                    type: "POST",
                    url: "<?php echo base_url() ?>backend/chg_img/" +id+"/"+newval+"/"+local,
                    data:{},
                    success: function(result){ alert('Successfully called');},
                    error:function(exception){alert('Exeption:'+exception);}
                    });
            });

}

问题是:有时需要花费太多时间来进行 ajax 调用，有时当用户仅与选择选项交互一次时会进行 3 或 4 次调用。

我也尝试过 .on('change', function()) 和 .change(function()) 但我遇到了同样的问题。有什么想法吗？

Answer 1

问题是您每次用户从选择框中选择选项时都添加 $('select').bind('change',function() { 。而不是这样，只需修改您的HTML 从选择框中删除 onchange="categoryIMG() 并将 $('select').bind('change',function() { 移动到 $ (document).ready(function(){ block 。