[英]Duplicating a dropdown “multiple select” in jQuery
I have a search page, where a user should be able to select multiple options in the search criteria, eg when for example selecting search criteria for a Haircolor, instead of the user only being able to select one type of haircolor, they should be able to select multilple types for hair color to search on. 我有一个搜索页面,用户应该能够在搜索条件中选择多个选项,例如当选择一种染发的搜索条件时,而不是用户只能选择一种染发类型,他们应该能够选择多种类型的发色进行搜索。
This is represented here: 这表示在这里:
https://jsfiddle.net/ztjzcLL0/1/ https://jsfiddle.net/ztjzcLL0/1/
However, now I need to create another one that does the exact same thing, but with other criterias, eg interests. 但是,现在我需要创建另一个功能完全相同的东西,但是要符合其他条件,例如兴趣。
How I want the code to work is shown here: https://jsfiddle.net/nno5fgn6/1/ But this is only where I have dublicated the code twice, but when I need to have for example 6 of these dropdown's, this doesn't seem like the best way to do so. 我希望代码的工作方式如下所示: https ://jsfiddle.net/nno5fgn6/1/但这只是我将代码两次复制两次的地方,但是当我需要例如这些下拉菜单中的6个时,这不会似乎不是最好的方法。
How do I do that in the first jsfiddle
above? 我如何在上面的第一个jsfiddle
做到这jsfiddle
?
All of these select dropdowns are represented within a form, so that I can pass the values, and query these. 所有这些选择下拉列表都在一个表单中表示,因此我可以传递值并查询它们。
All of this works as it should - also the duplicate code, but again this isn't a nice way to approch this with 6 search criterias. 所有这一切都应该正常工作-也是重复的代码,但是这也不是用6个搜索条件来解决这个问题的好方法。
Looking forward to hearing your thoughts. 期待听到您的想法。
You could try something like this https://jsfiddle.net/nno5fgn6/2/ 您可以尝试这样的事情https://jsfiddle.net/nno5fgn6/2/
$(".dropdown dt a").on('click', function() {
$(this).parents('.dropdown').find("dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(this).parents('.dropdown').find("dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
var dd = $(this).parents('.dropdown');
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
dd.find('.multiSel').append(html);
dd.find(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
where you use .parents() fn to access relatively contained elements 使用.parents()fn访问相对包含的元素的地方
Main idea is use same class and .closest()
to find current dropdown. 主要思想是使用相同的类和.closest()
查找当前下拉列表。
$(".dropdown dt a").on('click', function() {
$(this).closest('.dropdown').find("dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(this).closest('.dropdown').find("dd ul").hide();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) {
$clicked.closest('.dropdown').find("dd ul").hide();
}
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
var $currentDropdown = $(this).closest('.dropdown');
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$currentDropdown.find('.multiSel').append(html);
$currentDropdown.find(".hida").hide();
} else {
$currentDropdown.find('span[title="' + title + '"]').remove();
var ret = $currentDropdown.find(".hida");
$currentDropdown.find('dt a').append(ret);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.