jQuery Ajax Drop Down

时间:2010-07-19 14:11:49

标签: jquery

我有一个下拉列表,点击后发出ajax请求,用最新的库存水平更新下拉列表。

当我点击下拉列表时,会发出请求,下拉列表会更新并显示最新数据。问题是当用户选择一个选项时,再次点击ajax请求停止选择一个选项。

我确实尝试取消绑定Click功能,但是我无法在用户想要更改所选内容的情况下重新绑定点击。

下拉

<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);
            }
        });
    });
});

5 个答案:

答案 0 :(得分:0)

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

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

您可以根据需要重置它。

答案 1 :(得分:0)

如果我没有误解你,听起来这只是一个冒泡的问题。尝试添加:

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

答案 2 :(得分:0)

事件冒泡:$('select.ProQty')上的点击事件也会影响元素的子项。这就是用户点击<option>时再次发送ajax请求的原因。点击选项“冒泡”到$('select.ProQty').click()

如果您想要阻止此次冒泡并重新发送ajax请求,则需要停止事件传播。以下代码块将实现此目的。

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

答案 3 :(得分:0)

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>

答案 4 :(得分:0)

<?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();
    }
}
?>