Solved

Drop-down question

Posted on 2014-03-25
2
415 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
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
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)

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now