Question

我有一个搜索页面，用户应该可以在搜索条件中选择多个选项，例如例如，当选择Haircolor的搜索条件时，他们应该能够选择多种类型的头发颜色进行搜索，而不是用户只能选择一种类型的头发颜色。

这表示在这里：

https://jsfiddle.net/ztjzcLL0/1/

然而，现在我需要创建另一个完全相同的东西，但与其他标准，例如利益。

我希望代码如何工作如下所示：https://jsfiddle.net/nno5fgn6/1/ 但这只是我两次公开代码的地方，但是当我需要这些下拉列表中的6个时，这似乎不是最好的方法。

我如何在上面的第一个jsfiddle中执行此操作？

所有这些选择下拉列表都在表单中表示，以便我可以传递值并查询这些值。

所有这一切都是应有的 - 也是重复的代码，但这也不是一个很好的方法，用6个搜索标准来解决这个问题。

期待听到您的想法。

Answer 1

你可以尝试这样的事情 https://jsfiddle.net/nno5fgn6/2/

user

使用.parents（）fn访问相对包含的元素

Answer 2

Here就是一个例子。

主要想法是使用相同的类和.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);

      }
    });

复制下拉菜单＆＃34;多个选择＆＃34;在jQuery中

2 个答案: