write labels for <option> tags based on selectedIn

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 text boxes based on drop down selection using:

var showLeftTemplates = function(sel) {   
var locations = [ "template  1",
                  "template  2",
                  "template  3",
                  "template  4",
                  "template  5",
                ];

 var srcLocation = locations[sel.selectedIndex];         

 if (srcLocation != undefined && srcLocation != "") {      
 document.getElementById('LeftTemplates').value = srcLocation;   
 } 
}

and

 <select class="c10" onchange="showLeftTemplates(this)">
 <option selected="selected">Please select a template...</option>
 <option label="option 2"></option>
 <option label="option 3"></option>
 <option label="option 4"></option>
 <option label="option 5"></option>
 <option label="option 6"></option>
 </select>

 <textarea cols="37" rows="25" readonly="readonly" id="LeftTemplates">
 Templates will auto-populate 
 here depending on the 
 selection made from the 
 drop-down list.
 </textarea>

Thanks again to Usman, Satish, and KorHosik for their answers!

Next step: With my drop down list, i now want to essentially "host" all of the drop down list labels in the same script. Reason being is the script uses selectedIndex, and sometimes templates are going to get moved around. That's easy enough, but when I rearrange the order of the templates, then I also need rearrange the titles of the of options in my drop down list. This means editing both my script and my markup, and I'd prefer to consolidate the work into one area.

So using the same structure as my previous script, here's what I came up with:

<form name="left" action="">
<select id="LeftTemplates" onchange="showLeftTemplates(this)">
<option selected="selected" label="Please select a template..."></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
<option label="LeftValues(this)"></option>
</select>

here's the script

<script type="text/javascript">
var LeftValues = function(sel) {
var labels = [  "Please select a template...",
            "test1",
            "test2",
            "test3",
            "test4",
            "test5",
            "test6",
         ];

            var srcValues = location[sel.selectedIndex];         

    if (srcValues != undefined && srcValues != "") {      
    document.getElementById('LeftTemplates').innerHTML= srcValues;  
  }  
}
</script>

I'm sure most of you can look at this without testing and know it won't work, not even close. I'm honestly stumped as to how I could get the labels to load so that if I change the order of the templates, I can easily change the order of the titles for the drop down list so I don't mix up the wrong name with the wrong template that loads.

If anyone can help me out with this I'd greatly appreciate it, I'm not sure if I'm going about the whole script the wrong way, if its a simple mistake that I've overlooked (I've also tried <select id="LeftTemplates" onload="LeftValues(this)" onchange="showLeftTemplates(this)"> but that didn't work either. I wish I could provide more information, but I'm not even getting an error when I test it. It's just not working.

Thanks in advance!

i'm starting to think this line is the problem:

var srcValues = location[sel.selectedIndex];

and i'm trying to work this into it

var srcValues = location[options.selectedIndex.value];

but that still isn't working, just sharing updates.

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:

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

function buildSelect() {
        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