基於的selectedIndex使用JavaScript

Question

接下來的這個問題的工作與我貼在loading text into textarea based on drop down selection問題結合標籤寫入的標籤，已經解決了，我必須模板發佈基於文本的框使用下拉菜單選擇：

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; 
} 
} 

和

<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> 

再次感謝烏斯曼，薩蒂什南比亞和KorHosik爲他們的答案！

下一步：使用我的下拉列表，我現在想基本上「託管」相同腳本中的所有下拉列表標籤。原因在於腳本使用selectedIndex，有時候模板會移動。這很簡單，但是當我重新排列模板的順序時，我還需要在下拉列表中重新排列選項的標題。這意味着編輯我的腳本和我的標記，我寧願將工作合併到一個區域。

因此，使用相同的結構，我以前的劇本，這是我想出了：

<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> 

這裏的腳本

<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> 

我相信大多數的，你可以看看這個不測試和知道它不會工作，甚至不接近。我真的很難對付我如何加載標籤，所以如果我改變模板的順序，我可以很容易地改變下拉列表的標題順序，所以我不會混淆錯誤的名稱加載了錯誤的模板。如果任何人都可以幫助我解決這個問題，我將不勝感激，我不確定我是否以錯誤的方式處理整個腳本，如果它是我忽略的一個簡單錯誤（我'以前也試過<select id="LeftTemplates" onload="LeftValues(this)" onchange="showLeftTemplates(this)">，但沒有工作，要麼。我希望我能提供更多的信息，但我還沒有得到一個錯誤，當我測試它。它只是不工作。

提前感謝！

我開始認爲這條線是問題：

var srcValues = location[sel.selectedIndex];

，我努力工作，把它

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

這一點，但仍然不能正常工作，只是共享更新。

Answer 1

option標記的label屬性只是一個文本標籤，所以它永遠不會調用您的JavaScript函數，因爲它看起來像你正在試圖做的上面。你真正想要做的是使用JavaScript構建你的整個選擇，所以當你改變你的模板順序時它會自動更新。我會嘗試寫下可能對你有幫助的事情。

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> 

檢查this example