0

下一个问题与我在根据下拉选择将文本加载到文本区域时发布的问题结合使用已解决，我有模板基于下拉选择发布到文本框，使用：

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>

再次感谢 Usman、Satish 和 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];

但这仍然不起作用，只是共享更新。

4

1 回答 1

1

标签的label属性option只是一个文本标签，因此它永远不会调用您的 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>

检查这个例子

于 2011-09-03T20:44:54.280 回答