BStud BStud - 1 month ago 6
HTML Question

Only one dropdown choose at the time

I'm completely new on this field and what I have so far are two independent dropdown menus. I'm trying to make user to be able to select only from one of both at the time. For example if user select something from

dropdown 1
and then select another thing from
dropdown 2
,
dropdown 1
to become unselected.

Here is snippet of what I have in my html part

<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>


Here is 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');
});
});


This is simple demo. You can notice that you can select same time one car and one truck. Should be only car or only truck at the time:
https://jsfiddle.net/j82ryu5k/2/

MJH MJH
Answer

Perhaps something like this fiddle will work for you.

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>

Script:

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');
    });
});