Event click for tag

Question

When I click on an option, I want the selected attribute to be applied to the clicked option and removed from the previously selected option.

Here is the html

<form action="" method="post" class="form" name="myForm">
    <select id="first" name="mySelect">
        <option class="my-choise" selected="selected">1</option>
        <option class="my-choise">2</option>
        <option class="my-choise">3</option>
        <option class="my-choise">4</option>
    </select>
</form>

And here is the javascript. Please note I am not using jQuery

 var objSel = document.forms[0].elements[0];
for (var i=0; i<objSel.options.length; i++) {
    console.log(document.getElementsByClassName('my-choise')[i]);
    objSel.options[i].addEventListener('click', function(){
        alert (ok);
        var id = document.getElementsByClassName('my-choise')[i];
        id.setAttribute('selected', 'selected');
    },false);
}

Answer 1

it would absolutely make sense if you set the selected attribute on your 'select' element using another element like a button.

but if you click on the options in your same 'select' element, the options are being already selected behind the scenes and there is absolutely no reason for you to set the 'selected' attribute on the same 'select' element.

here is a demo for you in jsfiddle that shows that options are being set selected already automatically: DEMO

EDIT: to have your javascript execute after the html is loaded, put it in a function that will only run after the document is fully loaded:

document.onload=onLoadHandler;

function onLoadHandler(){
 //put your onclick handler attachment here
}