CODEWITHSUNDEEP
javascriptjqueryhtmlcss
S Raihan
S Raihan

Reputation: 387

javascript IE issue . Not working in IE only

I have a Branching Drop down Effect (not Sure about the Name) . I am not Good in javascript and jquery but I can modify little .And with that knowledge I made this Effect .

You can See the Live Demo : http://saifraihan.webege.com/Branching%20New/branching.html

Here is my:

HTML

<form id="survey" action="#" method="post">
    <div id="section">
            <label for="Select">Select a step</label>
            <select id="select" onchange="selection(this);">
                    <option value="none">
                            Input1
                    </option>
                    <option value="radio">
                            Radio1
                    </option>
            </select>
    </div>
    <div id="section2" style="display:none;">
            <input name="" type="text">
    </div>
    <div id="section5" style="display:none;">
            <p>
                    Radio Step 1<br/>
                    <label>
                            <input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_0">
                            Radio</label>
                    <br>
                    <label>
                            <input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_1">
                            Radio</label>
                    <br>
            </p>
    </div>
</form>

JS:

var sections ={
'none': 'section2',
'radio': 'section5'



};

var selection = function(select) {

 for(i in sections)
    document.getElementById(sections[i]).style.display = "none";    
    document.getElementById(sections[select.value]).style.display = "block";

}

This Example Working Great in FF , Chrome and Opera . BUT the PROBLEM is , it's not working in any version of IE . I am not sure why . As I am weak in javascripts I am not figuring out why this is not running in IE . Can there be any solution of this ? If can IT will be great .

Thanks In advance .

Upvotes: 1

Views: 97

Answers (1)

Matt Berkowitz
Matt Berkowitz

Reputation: 975

Bind your event like this:

document.getElementById('select').addEventListener('change', function() { selection(this) });

That seemed to fix things for me in IE (10). If you need to support 8 or before: events are attached using attchEvent in these versions of IE. So you'll need to write that logic as well (or you can use jQuery or some other library to handle the crossbrowser stuff for you).

Fiddle: http://jsfiddle.net/jnuFq/2/

Upvotes: 1

Related Questions