Write Labels For Tags Based On Selectedindex Using Javascript

This next question works in conjunction with the question I posted at loading text into textarea based on drop down selection That has been solved and I have templates posting to t

Solution 1:

The label attribute of an option tag is just a text label, so it will never call your javascript function as it looks like you are trying to do above. What you really want to do is build out your entire select using javascript, so it will automatically update when you change the order of youe templates. I'll try and write something below that might help you.

HTML:

<form id="leftTemplates" name="left" action="">
    <select id="templateSelect" onchange="showSelectedTemplate(this)">
    </select>
</form>

Javascript:

<scripttype="text/javascript">window.onLoad = buildSelect();

functionbuildSelect() {
        var labels = ["Please select a template...",
            "test1",
            "test2",
            "test3",
            "test4",
            "test5",
            "test6"
         ];

        for(var i=0; i<labels.length; i++) {
            var selectBox = document.getElementById('templateSelect');
            var newOption = document.createElement('option');
            newOption.label = labels[i];
            newOption.innerHTML = labels[i];
            newOption.value = labels[i];
            if(i==0) { newOption.setAttribute('selected','selected'); }
            selectBox.appendChild(newOption);
        }
    }
showSelectedTemplate = function(elem) {
   var selectedTemplate = elem.options[elem.options.selectedIndex].value;
    alert(selectedTemplate);
}

</script>

check this example