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

回答

相關問題