?
Solved

Drop-down question

Posted on 2014-03-25
2
Medium Priority
?
455 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 2000 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 83

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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)
Suggested Courses
Course of the Month17 days, 4 hours left to enroll

864 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