如何将多个单独的查询结果显示到单个下拉框中的选项中
How do i display multiple separate query results into options in a single drop down box?
请参考此处的快速和肮脏的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()函数将option添加到您的选择框中。
因为有多个源，我可能会绑定一个类来告诉我如何过滤它。我将创建我的传播函数来添加一个新选项，并将其过滤器类型/源作为一个类包含:
function prop1(){
$("<option/>")
.val('The Value')
.html('Display Text')
.addClass('filter-prop1')
.appendTo('select#FriendsConnected');
}
现在我有了第二个做同样事情的函数，只是将绑定的类名更改为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();
这将隐藏第二次传播的所有选项，只显示第一次传播的选项，以此类推，但这只是一个示例。
如何回答这个问题的全部细节可以在这里找到。
如何绑定多个函数结果作为选项选择在一个表单选择弹出框?
代码如下
HTML<!--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="s_Friends">
<option value="0">Filter Friends/Requests</option>
<option value="f_connected">Connected Friends</option>
<option value="f_requests">Friend Requests</option>
</select>
</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>
JS
Parse.initialize("ccccc", "xxxxx");
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
});
}
_.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
});
}
_.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() {
$('select#s_Friends').change(function(){
var selection = $(this).val();
if(selection=='f_connected')
FriendsConnected();
else if(selection=='f_requests')
FriendsPending();
});
相关文章：
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 在不破坏未定义函数的情况下，对多个视图使用单个js文件
- 如何在不需要单击按钮的情况下获取选项的值
- 如何将CSS(特别是填充/边距）应用于select下拉菜单的选项或optgroup
- html+javascript:如何在某些条件下禁用dropdownlist中的null选项
- 如何为下拉列表的每个选项添加一个属性
- 重置为下拉菜单中的未绑定选项
- 将单个下拉列表计算器升级到多个下拉列表
- 使用 jquery 选择单个下一个同级
- JSHint:覆盖整个文件夹的单个 .jshintrc 选项
- Regex匹配由一个或多个字母或数字包围的所有单个下划线
- 从单个下拉菜单启用选项卡
- .live listner来检查用户是否按下选项卡来关注当前输入字段
- 多个搜索选项，单个字段，通过下拉菜单js/jquery进行选择
- 如何将多个单独的查询结果显示到单个下拉框中的选项中
- 查询单个ie选项卡的内存使用情况
- 在单个下拉列表中填充来自两个不同列的值
- 如何在Bootstrap中将单个下拉菜单附加到正文
- 如何确保javascript单页应用程序只能在单个浏览器选项卡上执行
- 如何使用Java将会话限制为单个浏览器选项卡
