为< option>写入标签基于selectedIndex使用JavaScript的标签 [英] write labels for <option> tags based on selectedIndex using JavaScript
问题描述
下一个问题与我在根据下拉列表选择将文本加载到textarea中已经解决了，我已经根据下拉列表选择使用以下方式将模板发布到文本框：
var showLeftTemplates = function（sel）{
var locations = [template 1，
template 2，
template 3
模板4，
模板5，
];
var srcLocation = locations [sel.selectedIndex];
if（srcLocation！= undefined&& srcLocation！=）{
document.getElementById（'LeftTemplates'）value = srcLocation;
}
}
和
< select class =c10onchange =showLeftTemplates（this）>
< option selected =selected>请选择一个模板...< / 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 =37rows =25readonly =readonlyid =LeftTemplates>
根据
下拉列表中的
选择，模板将自动填充
。
< / textarea>
再次感谢Usman，Satish和KorHosik的答案！
下一步：使用我的下拉列表，我现在想在同一个脚本中基本上主持所有的下拉列表标签。原因是脚本使用 selectedIndex ，有时候模板会被移动。这很简单，但是当我重新排列模板的顺序时，我还需要在我的下拉列表中重新排列选项的标题。这意味着编辑我的脚本和我的标记，我更喜欢将工作整合到一个区域。
所以使用与我以前的脚本相同的结构，这里是我想出了：
< form name =leftaction =>
< select id =LeftTemplatesonchange =showLeftTemplates（this）>
< option selected =selectedlabel =请选择一个模板...>< / 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 = [请选择一个模板...，
test1，
test2，
test3，
test4，
test5，
test6，
];
var srcValues = location [sel.selectedIndex];
if（srcValues！= undefined&& srcValues！=）{
document.getElementById（'LeftTemplates'）。innerHTML = srcValues;
}
}
< / script>
我敢肯定，大多数人可以在没有测试的情况下看这个，知道它不会工作，差远了。老实说，如何将标签加载，以便如果我更改模板的顺序，我可以轻松地更改下拉列表中的标题的顺序，以免混淆错误的名称加载错误的模板。
如果有人可以帮助我，我非常感激，我不知道我是否会对整个脚本做错，如果它一个简单的错误，我忽略了（我也尝试过< select id =LeftTemplatesonload =LeftValues（this）onchange =showLeftTemplates（this）> 但是这不行，我希望我可以提供更多的信息，但是当我测试它时，我甚至不会收到错误，这只是没有用。
提前谢谢！
我开始认为这一行是问题：
var srcValues = location [sel.selectedIndex];
我正在努力工作>
var srcValues = location [options.selectedIndex.value];
但仍然没有工作，只是分享更新。
标签选项标签的c $ c>属性只是一个文本标签，所以它永远不会调用您的JavaScript功能，因为它看起来像你正在做上述。您真正想要做的是使用javascript构建您的整个选择，所以当您更改youe模板的顺序时，它将自动更新。我会尝试下面写下可能有助于您的东西。
HTML：
< form id =leftTemplatesname =leftaction =>
< select id =templateSelectonchange =showSelectedTemplate（this）>
< / select>
< / form>
Javascript：
code>< script type =text / javascript>
window.onLoad = buildSelect（）;
函数buildSelect（）{
var labels = [请选择一个模板...，
test1，
test2，
test3，
test4，
test5，
test6
]; （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 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
这篇关于为< option>写入标签基于selectedIndex使用JavaScript的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
