Question

我正在尝试创建一个重置过滤器按钮，重置下拉框而不重新加载页面。

重置过滤器按钮设法将下拉框重置为默认值而不重新加载页面，但重置下拉框后，下拉框中的html不再起作用。

的index.php

 <button style="width: 100%; height: 40px" name="resetFilter" id="resetFilter">Reset filters</button>

          <section class="main2">
        <div class="wrapper-demo2">
          <div id="dd2" class="wrapper-dropdown-2" tabindex="1">
            <span class="transport">Select mode of transport</span>
              <ul class="dropdownTransport" tabindex="1">
                  <li value="Driving"><a href="#">Driving</a></li>
                  <li value="Transit"><a href="#">Transit</a></li>
              </ul>
          </div>
        </div>
      </section>
    <script src="js/dropdown2.js"></script>
    <script src="js/index.js"></script>

index.js

$(function(e) {
   $('#resetFilter').click(function(e) {   
      var dropdownClone2 = $(".wrapper-demo2").clone();
      $(".wrapper-demo2").html(dropdownClone2);
      e.preventDefault();
    });

dropdown2.js

  function DropDown2(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span.transport');
    this.opts = this.dd.find('ul.dropdownTransport > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
  }
  DropDown2.prototype = {
    initEvents : function() {
      var obj = this;

      obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        return false;
      });

      obj.opts.on('click',function(){
        var opt = $(this);
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text('Option: ' + obj.val);
      });
    },
    getValue : function() {
      return this.val;
    },
    getIndex : function() {
      return this.index;
    }
  }

  $(function() {

    var dd2 = new DropDown2( $('#dd2') );

    $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-2').removeClass('active');
    });

  });

Answer 1

首先，在您的dd2对象中添加data-initial-value以重置范围：

<div id="dd2" class="wrapper-dropdown-2" tabindex="1" data-initial-value="Select mode of transport">

克隆下拉列表时，将删除所有侦听器。所以你必须再次初始化，并克隆孩子：

$('#resetFilter').click(function(e) {   
  var dropdownClone2 = $('.wrapper-demo2').children().clone();
  $(".wrapper-demo2").html(dropdownClone2);
  new DropDown2( $('#dd2') ); // initialize the new DropDown
  e.preventDefault();
});

在DropDown构造函数中：

function DropDown2(el) {
   this.dd = el;
   this.placeholder = this.dd.children('span.transport');
   this.placeholder.html(this.dd.attr("data-initial-value"));

这是完整的HTML / JS（全部在一个文件中）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="jquery.min.js"></script>
</head>
<body>
     <button style="width: 100%; height: 40px" name="resetFilter" id="resetFilter">Reset filters</button>
        <section class="main2">
        <div class="wrapper-demo2">
          <div id="dd2" class="wrapper-dropdown-2" tabindex="1" data-initial-value="Select mode of transport">
            <span class="transport">Select mode of transport</span>
              <ul class="dropdownTransport" tabindex="1">
                  <li value="Driving"><a href="#">Driving</a></li>
                  <li value="Transit"><a href="#">Transit</a></li>
              </ul>
          </div>
        </div>
      </section>
    <script type="text/javascript">
    /*<![CDATA[*/
    $(function(e) {
       $('#resetFilter').click(function(e) {
          var dropdownClone2 = $('.wrapper-demo2').children().clone();
          $(".wrapper-demo2").html(dropdownClone2);
          var dd2 = new DropDown2( $('#dd2') );

          e.preventDefault();
        });
    });

    function DropDown2(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span.transport');
    this.placeholder.html(this.dd.attr("data-initial-value"));
    this.opts = this.dd.find('ul.dropdownTransport > li');
    this.opts.removeClass("selected"); // <<<< NEW
    this.val = '';
    this.index = -1;
    this.initEvents();
  }
  DropDown2.prototype = {
    initEvents : function() {
      var obj = this;

      obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        return false;
      });

      obj.opts.on('click',function(){
        var opt = $(this);
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text('Option: ' + obj.val);
        obj.opts.removeClass("selected"); // <<<< NEW
        opt.addClass("selected"); // <<<< NEW
      });
    },
    getValue : function() {
      return this.val;
    },
    getIndex : function() {
      return this.index;
    }
  }

  $(function() {

    var dd2 = new DropDown2( $('#dd2') );

    $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-2').removeClass('active');
    });

  });
    /*]]>*/
    </script>
</body>
</html>

尝试使用javascript无法正常创建重置过滤器按钮

1 个答案: