jQuery Ajax Drop Down

我有一个下拉菜单，点击时会发出ajax请求，以最新的库存水平更新下拉菜单。jQuery Ajax Drop Down

当我点击下拉菜单时，会发出请求，下拉列表会更新并下载最新的数据。问题是当用户选择了Click ajax请求时再次停止选择选项的选项。

我曾尝试unBinding点击功能，但没有工作，但我不能然后重新绑定点击，以防用户想改变他们选择的内容。

下拉

<select name="Qty" id="88" class="ProQty"> 
    <option value="0">Qty</option> 
    ... 
</select>

jQuery的

//Update Qty Levels Automatically 
$(function QtyCheck() { 
    $("select.ProQty").click(function() { 
     var ProductID = $(this).attr('id'); 

     var Startdd = $("#Startdd").val(); 
     var Startmm = $("#Startmm").val(); 
     var Startyy = $("#Startyy").val(); 
     var StartHours = $("#StartHours").val(); 
     var StartMinutes = $("#StartMinutes").val(); 
     var Enddd = $("#Enddd").val(); 
     var Endmm = $("#Endmm").val(); 
     var Endyy = $("#Endyy").val(); 
     var EndHours = $("#EndHours").val(); 
     var EndMinutes = $("#EndMinutes").val(); 

     var dataString = 'Startdd=' + Startdd + '& Startmm=' + Startmm + '& Startyy=' + Startyy + '& StartHours=' + StartHours + '& StartMinutes=' + StartMinutes + '& Enddd=' + Enddd + '& Endmm=' + Endmm + '& Endyy=' + Endyy + '& EndHours=' + EndHours + '& EndMinutes=' + EndMinutes; 

     $("#" + ProductID).empty(); 
      //$("#" + ProductID).empty().unbind(); 

     $.ajax({ 
      type: "POST", 
      url: "./ajax/QtyCheck.asp?ID=" + ProductID, 
      data: dataString, 
      cache: false, 
      success: function(html) { 
         //setTimeout(function() { 
          $("#" + ProductID).append(html); 
         //},600); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
         //setTimeout(function() { 
          $("#" + ProductID).append(XMLHttpRequest.responseText); 
         //},600); 
      } 
     }); 
    }); 
});

来源

2010-07-19 Jemes

使用一个简单的布尔变量...

$(function QtyCheck() { 
    var loaded = false;  
    $("select.ProQty").click(function() { 
    if(loaded) return; 
    loaded = true; 
    // rest of your code 
    }); 
});

您可以根据需要重新设置。

来源

2010-07-19 14:19:11

如果我没有误解你，这听起来像这只是一个事件冒泡问题。尝试添加：

$('option').click(function(event){ 
    event.stopPropagation(); 
}

来源

2010-07-19 14:32:28 Squirkle

感谢您的重播，我不知道你的意思了？ – Jemes 2010-07-19 14:57:37

事件冒泡：您对$('select.ProQty')的点击事件也会影响元素的子元素。这就是当用户单击<option>时，再次发送ajax请求的原因。点击一个选项“气泡”$('select.ProQty').click()

如果你想停止发生这种冒泡，并重新发送ajax请求，你需要停止事件传播。以下代码块将完成此操作。

$('option').click(function(event){ 
    event.stopPropagation(); 
}

来源

2010-07-19 15:34:02 Squirkle

我不能让stopPropagation工作。我需要在哪里添加该代码？ – Jemes 2010-07-20 15:39:00

Jquery ajax drop down testajax 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> 
<head> 
    <title>Multiple Select Boxes</title> 
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('#loader').hide(); 
      $('#type').change(function(){ 
       $('#make').fadeOut(); 
       $('#loader').show(); 

       $.post("ajax_make.php", { 
        type: $('#type').val() 
       }, function(response){ 
        setTimeout("finishAjax('make', '"+escape(response)+"')", 400); 
       }); 
       return false; 
      }); 
     }); 

     $(document).ready(function() { 
      $('#btn-add').click(function(){ 
       $('#select-from option:selected').each(function() { 
        $.post("ajax_add_item.php", { 
         product_id: $(this).val(), 
         type: $('#type').val() 
        },function(response){ 
         window.location.reload(true); 
        }); 
        $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); 
        $(this).remove(); 
       }); 

      }); 
      $('#btn-remove').click(function(){ 
       $('#select-to option:selected').each(function() { 
        $.post("ajax_remove_item.php", { 
         product_id: $(this).val(), 
         type: $('#type').val(), 
         removeItem: $(this).text() 
        },function(response){ 
         window.location.reload(true); 
        }); 

        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); 
        $(this).remove(); 
       }); 
      }); 
      $('#btn-up').bind('click', function() { 
       $('#select-to option:selected').each(function() { 
        var newPos = $('#select-to option').index(this) - 1; 
        if (newPos > -1) { 
         $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>"); 
         $(this).remove(); 
        } 
       }); 
      }); 
      $('#btn-down').bind('click', function() { 
       var countOptions = $('#select-to option').size(); 
       $('#select-to option:selected').each(function() { 
        var newPos = $('#select-to option').index(this) + 1; 
        if (newPos < countOptions) { 
         $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>"); 
         $(this).remove(); 
        } 
       }); 
      }); 
     }); 


     function finishAjax(id, response){ 
     $('#loader').hide(); 
     $('#'+id).html(unescape(response)); 
     $('#'+id).fadeIn(); 
     } 
    </script> 
</head> 
<body> 
<div id="loader"><strong>Loading...</strong></div> 
    <fieldset> 
     <form name="theform" id="form" method="POST" action="search.php"> 
       <div style="width:500px;" align="center"> 
        <label for="type">Websites:</label> 
        <select id="type" name="type"> 
         <?php 
          include('class_dbcon.php'); 
          $connect = new doConnect(); 

          $q = mysql_query("SELECT * FROM website ORDER BY website_id ASC"); 
          while($row = mysql_fetch_assoc($q)) 
          { 
           $intWebsiteId = $row['website_id']; 
           echo '<option value="'.$row['website_id'].'">'.$row['website_name'].'</option>'; 
          } 
         ?> 
        </select> 
        <br><br> 
       <label for="make">Product:</label> 
        <select id="make" name="make"> 
         <option value="">-- Select Product --</option> 
        </select> 
       </div> 
       <br> 
       <div style="width:500px;" align="center"> 
        <select name="selectfrom" id="select-from" multiple size="5"> 
         <?php 
         if(!empty($intWebsiteId)) { 
          $pna = mysql_query("SELECT * FROM products p WHERE p.product_id NOT IN (SELECT pa.product_id FROM product_associate pa WHERE pa.team_id = ". $intWebsiteId. ")"); 
         } else { 
          $pna = mysql_query("SELECT * FROM products p WHERE p.product_id NOT IN (SELECT pa.product_id FROM product_associate pa WHERE pa.team_id = 1)"); 
         } 

         while($rowPna = mysql_fetch_assoc($pna)) 
         { 
          $intWebsiteId = $row['website_id']; 
          echo '<option value="'.$rowPna['product_id'].'">'.$rowPna['product_name'].'</option>'; 
         } 
         ?> 
        </select> 

        <a href="JavaScript:void(0);" id="btn-up"><img src="http://localhost:8080/website/IMG/Up-Arrow.jpg" alt="Pulpit rock" width="25" height="20"></a> 
        <a href="JavaScript:void(0);" id="btn-down"><img src="http://localhost:8080/website/IMG/arrow-down.jpg" alt="Pulpit rock" width="25" height="20"></a> 
        <select name="selectto" id="select-to" multiple size="5"> 
         <?php 

          if(!empty($intWebsiteId)) { 
           $ipa = mysql_query("SELECT * FROM products p INNER JOIN product_associate pa ON p.product_id = pa.product_id AND pa.team_id =". $intWebsiteId); 
          } else { 
           $ipa = mysql_query("SELECT * FROM products p INNER JOIN product_associate pa ON p.product_id = pa.product_id AND pa.team_id =1"); 
          } 
          while($rowIpa = mysql_fetch_assoc($ipa)) 
          { 
           echo '<option value="'.$rowIpa['product_id'].'">'.$rowIpa['product_name'].'</option>'; 
          } 

          $connect->disc(); 
         ?> 
        </select> 
        <br><br> 
        <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a> 
        <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a> 
       </div> 
      </form> 
     </fieldset> 

</body> 
</html>

来源

2013-05-08 12:44:51 Bhushan

<?php 
/* 

    In this class we instantiate an SQL Connection object. Connection details are assinged to 
    object variabes so that they can be used when connecting to the database. The two main 
    functions are conn() and disc(). They are for connecting and disconnecting to the SQL database. 

*/ 
class doConnect 
{ 
    private $databasehost; 
    private $databasename; 
    private $databaseusername; 
    private $databasepassword; 

    function __construct() 
    { 
     $this->setRes(); 
     $this->conn(); 
    } 

    function setRes() 
    { 
     $this->databasehost = "localhost"; 
     $this->databasename = "db_website"; 
     $this->databaseusername ="root"; 
     $this->databasepassword = ""; 
    } 

    function conn() 
    { 
     $con = @mysql_connect($this->databasehost,$this->databaseusername,$this->databasepassword) or die(mysql_error()); 
     @mysql_select_db($this->databasename) or die(mysql_error()); 

    } 

    function disc() 
    { 
     mysql_close(); 
    } 
} 
?>

来源

2013-05-08 12:58:34 Bhushan

jQuery Ajax Drop Down

回答

相关问题