Solved

Drop-down question

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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 …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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…

910 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

21 Experts available now in Live!

Get 1:1 Help Now