jquery interdependent dropdown lists

Question

I have 3 dropdown lists of same elements. Values selected in first list should not get displayed in second dropdown list. Values selected in second list should not get displayed in third dropdown list. How to do it using jquery?

$(".ACL").change(function(event){ //alert($("#ACL1 option:selected").val()); preferenceObject["acl1"]=$("#ACL1 option:selected").val(); //alert("acl1 pushed"); //alert($("#ACL2 option:selected").val()); preferenceObject["acl2"]=$("#ACL2 option:selected").val(); //alert("acl2 pushed"); preferenceObject["acl3"]=$("#ACL3 option:selected").val(); }); — JavaLearner
– JavaLearner, Commented Sep 17, 2012 at 8:19
<div class="ACL"> ACL : <select name="ACL1" id="ACL1"> <% for(int i=0; i< ACLList.size(); i++) { if(ACLList.get(i)!=null){%> <option value="<%= ACLList.get(i) %>"><%= ACLList.get(i) %></option> <%} } %> </select> — JavaLearner
– JavaLearner, Commented Sep 17, 2012 at 8:21
similarly i created acl2 acl3 in div acl. bt nw i dunno wt to do!! m fetchin acllist by request.getattribute — JavaLearner
– JavaLearner, Commented Sep 17, 2012 at 8:23

wklhuey · Accepted Answer · 2012-09-24 05:33:32Z

2

Check out demo: http://jsfiddle.net/ezKDB/

Jquery Plugin: https://github.com/WilliamHuey/mutually_exclusive_list_jquery

Usage:

$('select.classNameForEachList').onlyBeOne();

answered Sep 24, 2012 at 5:33

wklhuey

3111 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thecodeparadox · Accepted Answer · 2012-09-17 08:21:18Z

0

Here is an example:

HTML

<select class="sel-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>


<select class="sel-2">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>


<select class="sel-3">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

jQuery

var allSelects = $('select[class^=sel-]');
allSelects.on('change', function() {
  allSelects.find('options').show();
  allSelects.not(this).find('option[value="'+ this.value +'"]').hide();
});

The working demo

Hope this will give you an idea.

answered Sep 17, 2012 at 8:21

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

6 Comments

JavaLearner Over a year ago

what is this?--> $('select[class^=sel-]');

JavaLearner Over a year ago

dis is wt i wanted... thank u so much :-) . ll try to use it in my code. Bt m using id for each dropdown list

thecodeparadox Over a year ago

@anil ok, you can use.. but using a common class is easier... its your choice. but don't forget to accept as answer

JavaLearner Over a year ago

$('select[class^=sel-]'); m nt gettin dis line.

thecodeparadox Over a year ago

@anil it selected all select box whose class name start with sel-.

|

Goran Obradovic · Accepted Answer · 2012-09-17 11:00:08Z

0

Here is possible solution:

<html>
<body>
<select id="first" data-child="#second">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
</select>

<select id="second" data-child="#third">
</select>

<select id="third">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(init);

function mapItems(index, elem){
    var items = [];
    items.push({value:$(elem).val(), text:$(elem).text()});    
    return items;
}

function replaceItems(items, appendTo){
    appendTo.empty();
    for(var i in items){
        var item = items[i];
        if(item.value && item.text){
            appendTo.append("<option value='"+item.value+"'>"+item.text+"</option");
        }
    }
}

function selected(e){        
    var items = $(this).find("option:not(:selected)").map(mapItems);
    var child = $($(this).attr("data-child"));
    replaceItems(items, child);
    child.change();
}

function init(){
    var first = $("select#first");    
    var second = $("select#second");    
    var third = $("select#third");
    first.change(selected);
    second.change(selected);
    first.trigger('change');
}
</script>
</body>
</html>

It is not very pretty, but it works. See demo here.

UPDATE I have cleaned code up. This is link to last version: http://jsfiddle.net/goranobradovic/JLMJn/2/

UPDATE 2 I have put all html here, just copy it to empty html file and it works.

edited Sep 17, 2012 at 11:00

answered Sep 17, 2012 at 8:34

Goran Obradovic

9,0419 gold badges52 silver badges79 bronze badges

4 Comments

JavaLearner Over a year ago

when i pasted d same code in eclipse.. it s showin nthn in 2nd n 3rd list

Goran Obradovic Over a year ago

Paste to notepad first, jsfiddle sometimes puts some weird character at the end

JavaLearner Over a year ago

dat is fine.. bt it is nt showin any value in 2nd and 3rd list. html code i wrote in body and js code in head

Goran Obradovic Over a year ago

If you took this js code, you need to use data-child attributes in html, like in jsfiddle. First select has data-child="#idofsecondselect" and second select has data-child="#idofthirdselect"

Collectives™ on Stack Overflow

jquery interdependent dropdown lists

3 Answers 3

Comments

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related