CODEWITHSUNDEEP
jqueryasp.net-mvc-3
rexdefuror
rexdefuror

Reputation: 583

DropDownListFor, setting ID for <option>

Is this even possible with MVC3?

I want to filter two different dropdowns with same options, in a way that when in first an option is selected, in second dropdown that value should be hidden.

 $('#ddl1').change(function() {
    var selectedValue = $(this).val();
    $('#ddl2 option').each(function() {
        $(this).toggle($(this).val() !== selectedValue);
    });
});​

http://jsfiddle.net/b4MjY/2/ This all works well if all values are same. But what I need is that it does the same thing when values are different. So it filters by Text or ID of option and not value

I'm just not sure if there's a way to assign anything on it through MVC, without changing or creating helpers.

EDIT

Is it possible perhaps to get value from innerHTML from option and filter by that value?

UPDATE Thanks for all who helped!

This is what worked in the end as simplest possible solution. http://jsfiddle.net/b4MjY/23/

Although all solutions listed are good in different occasions.

Upvotes: 1

Views: 268

Answers (4)

Mihalis Bagos
Mihalis Bagos

Reputation: 2510

Ok I liked your problem and because I might implement something like that in the future, here is a plugin-like script. live example

You basically only have to add a class "mutual-exclusion" to every dropdown that you want values to be unique. This means that the script will work for any number of dropdowns you throw at it, and the live example has 3. Of course, only 2 would be ok since its the simplest case

Also, if you want to hide isntead of disable (which I prefer) you can see how in this example

Basically I only changed the 2 cases on if ($curSelected.filter('option[value="' ...

var $mutualExcludedDropdowns = $('.mutual-exclusion');
$mutualExcludedDropdowns.change(function() {
    var selectedValue = $(this).val();
    var curItem = $(this)
    var $curSelected = $('option:selected' , $mutualExcludedDropdowns);

    $mutualExcludedDropdowns.each(function(index, dropdownList) {
        if ($(curItem)[0]  !== $(dropdownList)[0])
        {
            $('option', $(dropdownList)).each(function(index, optionItem) {
                if ($curSelected.filter('option[value="' + $(optionItem).val() + '"]').length > 0)
                    {
                        $(optionItem).attr('disabled', 'disabled');
                    }
                    else
                    {
                        $(optionItem).removeAttr('disabled');
                    }
            });
        }
    });
});

Upvotes: 1

Nope
Nope

Reputation: 22339

I want to filter two different dropdowns with same options, in a way that when in first an option is selected, in second dropdown that value should be hidden.

I have played around with this in a previous stackoverflow question and found this to work well. See the DEMO below which does exactly that. It hides a value in a dropdown whcih is selected in another.

DEMO - Hiding a value in a dropdown which is selected in another dropdown

This is possible in MVC3, all you need to do is make a copy of the complete list using JavaScript and store it in an array for example.

Youn then can use the code similar to removeSelected as seen below to takes the selected value of the specified list and remove it from the specified target list.

The method will use the local copy of the complete list to be able to "re-fill" the list before removing an item to ensure any items not selected are added again.

Regardless if you use MVC3 or not the functionality of removing items using JavaScript/jQuery doesn't change. MVC3 simply supplies the list of items.

Just to add, you don't need an id value for each item for this. If they all have unique text you are ok. As you can see below, I'm only matching by value ignoring the id anyway.

var $ddl1 = $("#ddl1");
var $ddl2 = $("#ddl2");

var employees = [
    { Id: 0, Name: "Michael Jordan"},
    { Id: 1, Name: "Magic Johnson"},
    { Id: 2, Name: "Larry Bird"},
    { Id: 3, Name: "Some Guy"},
    { Id: 4, Name: "Another Dude"}
];


function resetEmployee($selectElement) {
    $selectElement.empty();

    employees.forEach(function(employee) {
        $selectElement.append('<option value="' + employee.Id + '">' + employee.Name + '</option>');
    });
};

resetEmployee($ddl1);
resetEmployee($ddl2);

removeSelected($ddl1, $ddl2);
removeSelected($ddl2, $ddl1);

function removeSelected($sourceSelect, $fromSelect) {
    var fromSelectedValue = $fromSelect.val();
    resetEmployee($fromSelect);

    $fromSelect.find('option[value="' + $sourceSelect.val()  + '"]').remove();
    $fromSelect.val(fromSelectedValue);
};

$ddl1.on('change', function(){
    removeSelected($ddl1, $ddl2);
});

$ddl2.on('change', function(){
    removeSelected($ddl2, $ddl1);
});

Upvotes: 1

uzername_not_found
uzername_not_found

Reputation: 339

Lazy coding:

$('#ddl1').change(function() {
    var selectedValue = $(this).val();
    $('#ddl2 option').each(function() {
        if($(this).val() == selectedValue)
            { $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false);
        };
    });
});
$('#ddl2').change(function() {
    var selectedValue = $(this).val();
    $('#ddl1 option').each(function() {
        if($(this).val() == selectedValue)
            { $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false);
        };
    });
});

Upvotes: 0

David Michael Harrison
David Michael Harrison

Reputation: 374

You could disable the option from being selected in the second dropdown with the disabled attribute

$('#ddl1').change(function() {
var selectedValue = $(this).val();
$('#ddl2 option').each(function() {
    if($(this).val() == selectedValue) $(this).attr('disabled',true);
    else $(this).attr('disabled',false);
});
});​

You cannot .toggle() or hide() options as IE wont allow the display to be set to none, the alternative is to .remove() the option and add them back on the next change.

Upvotes: 0

Related Questions