CODEWITHSUNDEEP
javascriptjquery
Sanjay
Sanjay

Reputation: 1236

Dropdown list selection not working properly in internet explorer

I have various dropdown lists, in a way that if we select first item should not show in second dropdown list for that I have written jquery like

$(document).ready(function() {
    $('.ddlProjectvalue').change(function() {
        updateDDLValues();       
    });
});

function updateDDLValues() {
    // Display all
    $('.ddlProjectvalue option').show();
    // Hide all selected options from other selectlists
    $('.ddlProjectvalue').each(function(i,element) {
        var selectedvalue = $(element).find('option:selected').val();
        $('.ddlProjectvalue').not(element).find('option[value="'+selectedvalue+'"]').hide();
    });    
}

as you can check jsfiddle.net, it is working fine in chrome and firefox but not working in internet explorer, what is the problem?

Upvotes: 0

Views: 1822

Answers (3)

Sanjay
Sanjay

Reputation: 1236

This Function is working Fine for Me in Only for Internet Explorer

function updateDDLValues() {
// Display all
$('.ddlProjectvalue span option').unwrap();
   // Hide all selected options from other selectlists
    $('.ddlProjectvalue').each(function (i, element) {
    var selectedvalue = $(element).find('option:selected').val();
    $('.ddlProjectvalue').not(element).find('option[value="' + selectedvalue + '"]').wrap('<span style="display: none;">');
});
}

OR 

function updateDDLValues() {
$('.ddlProjectvalue span option').unwrap().show();
 // Hide all selected options from other selectlists
  $('.ddlProjectvalue').each(function (i, element) {
   var selectedvalue = $(element).find('option:selected').val();
   $('.ddlProjectvalue').not(element).find('option[value="' + selectedvalue + '"]').wrap('<span>').hide();
                });
}

If we want to use other than I E, we can approach My above code(In My question) which was not supported by IE.

Upvotes: 0

prakashrajansakthivel
prakashrajansakthivel

Reputation: 2032

i have found the problem, $(element).find('option:selected').val() in this line element is coming as undefined in IE whereas in chrome proper value is coming

Upvotes: 1

Maurice Perry
Maurice Perry

Reputation: 32831

It seems that most browsers don't allow the hiding of an <option>. I think the way to go is to remove the <option> altogether.

Upvotes: 1

Related Questions