Solved

Drop-down question

Posted on 2014-03-25
2
431 Views
Last Modified: 2014-04-11
Hi,
I'm wondering if this is possible.

I have a page that lists employees of a company.
The employees show up in a series (10)  of dropdowns along the left side of the page.
Each drop down has all employees listed in the company.
The reason why there are ten drop downs with the same list of names isn't important.

Let say if employee "John Smith" who is listed in each drop down -- is selected in the first dropdown.
When the user goes to the second drop down, is it possible to omit "John Smith" from that second drop down.
The same goes for each subsequent drop-down. Can a name be removed from a drop down - automatically - once that name is selected on a previous drop down?

The backend I'm using to create the drop downs content is Perl, but I don't think that really matters either.
I think any possible answer lies in Javascript or Jquery -- something like that.
Anyone have examples of this being done?

Thanks
Nacht
0
Comment
Question by:nachtmsk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 8

Accepted Solution

by:
soupBoy earned 500 total points
ID: 39954401
Here is a link to the jsfiddle I just created that removes an option using jquery

Here is the code...
HTML:
<ul class="container-dropDown">
    <li>
        <select>
            <option val="-1">Select Employee</option>
            <option value="Tim">Tim</option>
            <option value="Sally">Sally</option>
            <option value="Chris">Chris</option>
            <option value="Steve">Steve</option>
            <option value="Tommy">Tommy</option>
            <option value="Jill">Jill</option>
            <option value="Robert">Robert</option>
        </select>
    </li>
    
    <li>
        <select>
            <option val="-1">Select Employee</option>
            <option value="Tim">Tim</option>
            <option value="Sally">Sally</option>
            <option value="Chris">Chris</option>
            <option value="Steve">Steve</option>
            <option value="Tommy">Tommy</option>
            <option value="Jill">Jill</option>
            <option value="Robert">Robert</option>
        </select>
    </li>
    
    <li>
        <select>
            <option val="-1">Select Employee</option>
            <option value="Tim">Tim</option>
            <option value="Sally">Sally</option>
            <option value="Chris">Chris</option>
            <option value="Steve">Steve</option>
            <option value="Tommy">Tommy</option>
            <option value="Jill">Jill</option>
            <option value="Robert">Robert</option>
        </select>
    </li>
    
    <li>
        <select>
            <option val="-1">Select Employee</option>
            <option value="Tim">Tim</option>
            <option value="Sally">Sally</option>
            <option value="Chris">Chris</option>
            <option value="Steve">Steve</option>
            <option value="Tommy">Tommy</option>
            <option value="Jill">Jill</option>
            <option value="Robert">Robert</option>
        </select>
    </li>
    
    <li>
        <select>
            <option val="-1">Select Employee</option>
            <option value="Tim">Tim</option>
            <option value="Sally">Sally</option>
            <option value="Chris">Chris</option>
            <option value="Steve">Steve</option>
            <option value="Tommy">Tommy</option>
            <option value="Jill">Jill</option>
            <option value="Robert">Robert</option>
        </select>
    </li>
    
    <li>
        <select>
            <option val="-1">Select Employee</option>
            <option value="Tim">Tim</option>
            <option value="Sally">Sally</option>
            <option value="Chris">Chris</option>
            <option value="Steve">Steve</option>
            <option value="Tommy">Tommy</option>
            <option value="Jill">Jill</option>
            <option value="Robert">Robert</option>
        </select>
    </li>
</ul>

Open in new window

Javascript using Jquery:
$('.container-dropDown select').on('change', function(){
    //get the value that was just selected
    var theValue = $(this).val();
    
    /*
    if the value isn't the default 'Select Employees', then loop through 
    and run the 'removeOption' function.
    */
    if(theValue != '-1'){
        $('.container-dropDown select').not($(this)).each(function(i,v){
           removeOption(v, theValue);
        });
    }
});

var removeOption = function(curElm, valueToRemove){
        
    $(curElm)
        .find('[value="' + valueToRemove + '"]') //find the matching option
        .prop('selected', false) //set the seleted attribute to false
        .hide() //hide it
    ;
};

Open in new window


Hopefully this is what you are looking for...  Hopefully my comments make sense too, if not let me know.

- Chris
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39954574
Test page : http://jsfiddle.net/K7fcU/

jQuery(function($) {
    var list = ["John Smith","emp2","emp3","emp4"];
    var n = 10;
    var createOptions = function() {
        var options = ["<option>Choose an employee</option>"];
        for(var i=0;i<list.length;i++) {
            options.push("<option value='" + list[i] + "'>" + list[i] + "</option>");    
        }
        return options.join("");
    }
    
    var options = createOptions();
    var dropdowns = "";
    for(var i=0;i<n;i++) {
        dropdowns += "<li><select name='employeList" + i +"'>" + options + "</select></li>";
    }
    $("<ul id='dd' />").append(dropdowns).appendTo("#el");
    
    $("select[name^=employeList]").change(function() {
        $(this).data("current", $(this).val());
        $("#el select").html(options);
        $("#el select").each(function() {
            var val = $(this).data("current");
            $("#el select").not(this).each(function() {
                $(this).find("option:gt(0)").filter(function() { return $(this).val() == val; }).remove();
            });
            if(val) {
                $(this).val(val);
            }
        });
    });
});

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question