个人中心
gpt4 book ai didi

javascript - 如何将多个单独的查询结果显示到单个下拉框中的选项中？

转载 作者：行者123 更新时间：2023-11-29 19:35:11 24 4
gpt4 key购买 nike

请在这里引用快速而肮脏的 jfiddle http://jsfiddle.net/Dano007/b11xarpp/5/

赏金是使用更新的 jfiddle 获得以下答案。基本上让下拉菜单显示功能的两个选项。单击其中一个选项时，结果将返回到页面上。

我认为下面的答案将有助于解决这个问题，尽管我的尝试遇到了困难。

如果您单击按钮，这就是我在使用过滤器时想要复制的最终结果。

代码

</head>

<body>

    <!--Drop down filter box that should show each option returned from functions below-->

    <form>
        <select name="huge" class="btn-group select select-block mbl select-multiple" id="select#FriendsConnected">
            <option value="0">Filter Friends/Requests</option>
        </select>

        <button id="FriendsConnected" type="button" class="button button-magenta">Connected Friends</button>
        <button id="FriendsPending" type="button" class="button button-orange">Friend Requests</button>
    </form>

    <!--Displays content/images on page after filter-->
    <div id="container">
        <div id="userimgs" class="responsive-image"></div>
    </div>
    <div id="containerFriendsPending"></div>
    <div id="containerFriendsConnected"></div>
    <div id="container">
        <div id="badgeimgs"></div>
    </div>


    <script type="text/javascript">
        Parse.initialize("79tphN5KrDXdjJnAmehgBHgOjgE2dLGTvEPR9pEJ", "9lblofQNZlypAtveU4i4IzEpaOqtBgMcmuU1AE6Y");

    Parse.User.logIn("dave", "delvedia", {
        success: function(user) {
            console.log("Logged in!");
        }
    });


         /////////Filter One///////////////////
        function FriendsPending() {

            $('#containerFriends').empty();
            $('#containerFriendsRejected').empty();
            $('#containerFriendsRequestSent').empty();
            $('#containerFriendsConnected').empty();


            var currentUser = Parse.User.current();
            var FriendRequest = Parse.Object.extend("FriendRequest");

            var query = new Parse.Query(FriendRequest);
            query.include('toUser');
            query.include('SentTo');
            query.include("myBadge");
            query.equalTo("fromUser", currentUser);
            query.equalTo("status", "Pending");

            query.find({
                success: function(results) {
                    var friends = [];
                    for (var i = 0; i < results.length; i++) {
                        friends.push({
                            imageURL: results[i].get('toUser').get('pic'),
                            friendRequestId: results[i].id,
                            username: results[i].get('toUser').get('username'),
                            userId: results[i].get('toUser').id


                        });


                    }
                    var select = document.getElementById("FriendsPending");
                    $.each(friends, function(i, v) {
                        var opt = v.username;
                        var el = document.createElement("option");
                        el.textContent = opt;
                        el.value = opt;
                        select.appendChild(el);
                    })

                    _.each(friends, function(item) {
                        var wrapper = $('<div class="wrapper"' + ' data-friend-request-id="' + item.friendRequestId + '"' + ' data-to-user-id="' + item.userId + '"></div>');
                        wrapper.append('<img class="images responsive-image BadgeImgOutline" src="' + item.imageURL + '" />');
                        wrapper.append('<div>' + item.username + '</div>');
                        wrapper.append('<div type="button" class="button button-blue">' + 'Accept Friend' + '</div>');
                        wrapper.append('<div type="button" class="button button-yellow">' + 'Decline' + '</div>');
                        $('#containerFriendsPending').append(wrapper);
                    });

                },
                error: function(error) {
                    alert("Error: " + error.code + " " + error.message);
                }
            });

        }

         /////////Filter Two///////////////////
        function FriendsConnected() {
            $('#containerFriendsRejected').empty();
            $('#containerFriendsPending').empty();
            $('#containerFriendsRequestSent').empty();
            var currentUser = Parse.User.current();
            var FriendRequest = Parse.Object.extend("FriendRequest");

            var query = new Parse.Query(FriendRequest);
            query.include('toUser');
            query.include('SentTo');
            query.include("myBadge");
            query.equalTo("fromUser", currentUser);
            query.equalTo("status", "Connected");

            query.find({
                success: function(results) {
                    var friends = [];
                    for (var i = 0; i < results.length; i++) {
                        friends.push({
                            imageURL: results[i].get('toUser').get('pic'),
                            friendRequestId: results[i].id,
                            username: results[i].get('toUser').get('username'),
                            userId: results[i].get('toUser').id


                        });


                    }
                    var select = document.getElementById("FriendsConnected");
                    $.each(friends, function(i, v) {
                        var opt = v.username;
                        var el = document.createElement("option");
                        el.textContent = opt;
                        el.value = opt;
                        select.appendChild(el);
                    })


                    _.each(friends, function(item) {
                        var wrapper = $('<div class="wrapper"' + ' data-friend-request-id="' + item.friendRequestId + '"' + ' data-to-user-id="' + item.userId + '"></div>');
                        wrapper.append('<img class="images responsive-image BadgeImgOutline" src="' + item.imageURL + '" />');
                        wrapper.append('<div>' + item.username + '</div>');
                        $('#containerFriendsConnected').append(wrapper);
                    });

                },
                error: function(error) {
                    alert("Error: " + error.code + " " + error.message);
                }
            });
        }

         //////////////////////////Takes results from functions and adds them to div to show///////////////////////////////

        $(document).ready(function() {
            $('#FriendsPending').click(function(e) {
                FriendsPending();
            });


            $('#FriendsConnected').click(function(e) {
                FriendsConnected();
            });


        });
    </script>

最佳答案

对于初学者，您可以使用.append() 或appendTo() 函数将选项 添加到您的选择框。

因为有多个源，我可能会绑定(bind)一个类来告诉我如何过滤它。我将创建我的传播函数以添加一个新选项并将其过滤器类型/源作为一个类包含在内:

    function prop1(){
       $("<option/>")
         .val('The Value')
         .html('Display Text')
         .addClass('filter-prop1')
         .appendTo('select#FriendsConnected');
    }

现在我有了第二个功能，除了将绑定(bind)的类名更改为 filter-prop2 之外:

    function prop2(){
       $("<option/>")
         .val('The Value')
         .html('Display Text')
         .addClass('filter-prop2')
         .appendTo('select#FriendsConnected');
    }

现在您可以根据其类型显示/隐藏选项，如下所示:

 $("select#FriendsConnected option.filter-prop2").hide();
 $("select#FriendsConnected option.filter-prop1").show();

这将隐藏第二次传播的所有选项，并仅显示第一次传播的选项，依此类推，但这只是一个示例。

关于javascript - 如何将多个单独的查询结果显示到单个下拉框中的选项中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25489367/

24 4 0
文章推荐： MySQL通过多个外键进行查询
文章推荐： MySQL选择时间戳不重叠的地方
文章推荐： 在 mvc Controller 中接收为 null 的 Javascript 对象
文章推荐： mysql - 如何获取mysql表中某一列中只有单个条目的数据？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com