CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
Smittey
Smittey

Reputation: 2490

jQuery works in Chrome and firefox, but not IE

First off, apologies for the poor title, but I honestly don't know enough about jQuery to be specific about what isn't working and other similarly-titled questions don't provide a working solution.

I have the following code which allows the user to select multiple options without holding down ctrl, and as the title suggests, it works fine except in IE (I'm currently using IE 11).

function MultiSelect()
{
    $('.select-toggle').each(function(){    
        var select = $(this), values = {};    
        $('option',select).each(function(i, option){
            values[option.value] = option.selected;        
        }).click(function(event){        
            values[this.value] = !values[this.value];
            $('option',select).each(function(i, option){            
                option.selected = values[option.value];        
            });    
        });
    });
}

It is being called from an html options box 

<script type="text/javascript">

$(document).ready(function() {
    MultiSelect();
});

<script>

</head>
<body>

...
<tr>
    <td colspan="2">
        <label for="defendants">Defendant(s):</label>
        <select class="select-toggle" name="people" id="people" multiple="multiple" >
            <option value="John Smith">John Smith</option>
            <option value="Julie Smith">Julie Smith</option>     
        </select>
    </td>
</tr>

Thanks

Upvotes: 0

Views: 1046

Answers (1)

Girish
Girish

Reputation: 12127

IE browser does not supprot option click event, you need to add event on select element, see below code 

$(document).ready(function() {
    MultiSelect();
});
function MultiSelect()
{
    $('.select-toggle').each(function(){    
        var select = $(this), values = {};    
        $('option',select).each(function(i, option){
            values[option.value] = option.selected;        
        });
        $(this).click(function(event){        
            values[this.value] = !values[this.value];
            $('option',select).each(function(i, option){            
                option.selected = values[option.value];        
            });    
        });
    });
}

DEMO

Upvotes: 1

Related Questions