Question

我在这里使用jquery引导程序类型下拉列表：http://labs.abeautifulsite.net/jquery-dropdown/

我正在使用它来创建我已经创建的现有按钮的下拉列表。 Mu = y按钮触发运行查询的AJAX调用，并从屏幕中删除该行。我需要一种方法从新的下拉列表中调用AJAX，而不是从现有的按钮调用。我试过改变课程，但没有用。这是我的代码：

下拉

<div id="dropdown-1" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
        <li><a href="#1">Previously discussed and <br>customer not interested 
</a></li>
        <li><a href="#2">Customer has preferred supplier or price
</a></li>
        <li><a href="#3">Customer does not have authority to purchase
</a></li>

        <li><a href="#4">Data inaccuracy/ no real opportunity
</a></li>
        <li><a href="#5">Other 
</a></li>

    </ul>
</div>

AJAX

$(function() {
$(".decline").click(function(){

var element = $(this);
var del_id = element.attr("id");
var order_id = element.attr("data-order");
 $.ajax({
   type: "POST",
   url: "decline.php",
   //data: info,
   data: {id1:del_id,order_id1:order_id},
   success: function(){cache: false}
});
  $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
  .animate({ opacity: "hide" }, "slow");

});
});

现有按钮

<a href="#" class="decline" id="<?php echo $id1; ?>" data-order="<?php echo $name; ?>"><input type="button" title="accept" value="Accept" /></a>

我想复制每个下拉条目的按钮功能，以便用户可以点击下拉列表中的任何条目并运行AJAX功能。

谢谢！

Answer 1

这对我有用 -

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.css" />
    <script type="text/javascript" src="http://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.js"></script>
</head>

<body>

    <a href="#" data-dropdown="#dropdown-1">dropdown</a>

    <div id="dropdown-1" class="dropdown dropdown-tip">
        <ul class="dropdown-menu">
            <li><a href="#1" id="1" data-order="a">Item 1</a></li>
            <li><a href="#2" id="2" data-order="b">Item 2</a></li>
            <li><a href="#3" id="3" data-order="c">Item 3</a></li>

            <li class="dropdown-divider"></li>

            <li><a href="#4">Item 4</a></li>
            <li><a href="#5">Item 5</a></li>
            <li><a href="#5">Item 6</a></li>
        </ul>
    </div>

    <div id="dropdown-1" class="dropdown dropdown-tip">
        <div class="dropdown-panel">
            You can put whatever HTML you want in a panel!
        </div>
    </div>

    <script type="text/javascript">
        $(function($) {
            $('.dropdown li a').click(function() {
                var element = $(this);
                var del_id = element.attr("id");
                var order_id = element.attr("data-order");
                $.ajax({
                    type: "POST",
                    url: "decline.php",
                    data: {id1:del_id,order_id1:order_id},
                    success: function(){cache: false}
                });
                $(this).parents(".show")
                    .animate({ backgroundColor: "#003" }, "slow")
                    .animate({ opacity: "hide" }, "slow");

                return false;
            });
        });
    </script>

</body>

</html>

单击菜单列表中的每个项目后，将进行单独的Ajax调用。

根据您的需要进行更改。

我希望它有所帮助。

从按钮下拉菜单运行AJAX功能

1 个答案: