javascript - 一次只能选择一个下拉菜单

Question

我在这个领域是全新的，到目前为止我拥有的是两个独立的下拉菜单。我试图让用户当时只能从两者中选择之一。例如，如果用户从 dropdown 1 中选择某个内容，然后从 dropdown 2 中选择另一个内容，dropdown 1 将变为未选中状态。

这是我的 html 部分的片段

<div id="d1" class="wrapper-dropdown-5 active" tabindex="1">
  <span>DropDown 1</span>
  <ul class="dropdown">
    <li>...</li>
    <li><a href="#"><img src="" alt=""/>Car 1</a></li>
    <li><a href="#"><img src="" alt=""/>Car 2</a></li>
  </ul>
</div>

<div id="d2" class="wrapper-dropdown-5 bottom" tabindex="1">
   <span>Dropdown 2</span>
  <div>
  <ul class="dropdown">  
    <li>...</li>
    <li><a href="#"> <img src="" alt=""/>Truck 1</a></li>
    <li><a href="#"> <img src="" alt=""/>Truck 2</a></li>
  </ul>
  </div>
</div>

这里是JS

  function DropDown(el) {

      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.val = '';
      this.index = -1;
      this.initEvents();

  }

  DropDown.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(obj.val);

          });
      },

      getValue : function() {
              return this.val;
      },

      getIndex : function() {
            return this.index;
      }

      }

      $(function() {
          var dd = new DropDown( $('#d1') );

          $(document).click(function() {
          $('.wrapper-dropdown-5').removeClass('active');

          });
      });

        $(function() {
                    var dd = new DropDown( $('#d2') );

          $(document).click(function() {
              $('.wrapper-dropdown-5').removeClass('active');
          });
        });

这是一个简单的演示。您会注意到，您可以同时选择一辆汽车和一辆卡车。当时应该只有汽车或只有卡车: https://jsfiddle.net/j82ryu5k/2/

Answer 1

也许是这样的 fiddle将为您工作。

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-5">
            <div id="d1" class="wrapper-dropdown-5 active" tabindex="1">
                <span data-text="Коли">Коли</span>
                <ul class="dropdown">
                    <li>...</li>
                    <li>
                        <a href="#"><img src="" alt="" />Кола 1</a>
                    </li>
                    <li>
                        <a href="#"><img src="" alt="" />Кола 2</a>
                    </li>
                </ul>
            </div>
            <div id="d2" class="wrapper-dropdown-5 bottom" tabindex="1">
                <span data-text="Камиони">Камиони</span>
                <div>
                    <ul class="dropdown">
                        <li>...</li>
                        <li>
                            <a href="#"> <img src="" alt="" />Камион 1</a>
                        </li>
                        <li>
                            <a href="#"> <img src="" alt="" />Камион 2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

脚本:

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}

DropDown.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);
        $('div > span').not(opt).each(function() {
            $(this).text($(this).data('text'));
        });
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text(obj.val);
    });
},

getValue : function() {
    return this.val;
},

getIndex : function() {
    return this.index;
}

}

$(function() {
    var dd = new DropDown( $('#d1') );

    $(document).click(function() {
        $('.wrapper-dropdown-5').removeClass('active');
    });
});

$(function() {
    var dd = new DropDown( $('#d2') );

    $(document).click(function() {
        $('.wrapper-dropdown-5').removeClass('active');
    });
});