Solved

Drop-down question

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)

777 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