我目前正在尝试在下拉菜单中选择文本的三个翻译后并排显示。到目前为止，我的第一个菜单工作没有问题，但第二个和第三个不合作。我认为这是某种嵌套错误，但我无法弄清楚。我如何让 javascript 为所有三个字段集工作？
我有什么：
<html>
<head>
<style>
body
{
background-image:url('gradient1.jpg');
background-repeat:repeat-x;
}
.ex
{
margin:auto;
width:90%;
padding:10px;
border:outset;
}
select
{
display:inline;
cursor:pointer;
}
form{
display:inline-block;
width: 550px;
}
</style>
</head>
<body>
<div class="ex">
<form action="#" method="post" id="demoForm">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<br>
<p>
<input type="button" id="showVal" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
<form action="#" method="post" id="demoForm2">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<br>
<p>
<input type="button" id="showVal" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
<form action="#" method="post" id="demoForm3">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<br>
<p>
<input type="button" id="showVal" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
</div>
</body>
<script>
(function() {
// get references to select list and display text box
var sel = document.getElementById('scripts');
var el = document.getElementById('display');
function getSelectedOption(sel) {
var opt;
for ( var i = 0, len = sel.options.length; i < len; i++ ) {
opt = sel.options[i];
if ( opt.selected === true ) {
break;
}
}
return opt;
}
// assign onclick handlers to the buttons
document.getElementById('showVal').onclick = function () {
el.value = sel.value;
}
document.getElementById('showTxt').onclick = function () {
// access text property of selected option
el.value = sel.options[sel.selectedIndex].text;
}
document.getElementById('doLoop').onclick = function () {
var opt = getSelectedOption(sel);
el.value = opt.value;
}
}());
// immediate function to preserve global namespace
</script>
这是 vanillaJS 中的解决方案。
[].forEach.call(document.querySelectorAll(".demoForm"), function(element) {
element.querySelector("#showVal").addEventListener("click", function(event) {
var dropdown = element.querySelector("#scripts");
var value = dropdown.options[dropdown.selectedIndex].text;
element.querySelector("#display").innerHTML = value;
})
});<div class="ex">
<form action="#" method="post" class="demoForm">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<br>
<div class="inline">
<p>
<input type="button" id="showVal" value="Select" />
</p>
<span id="display"></span>
</div>
</fieldset>
</form>
<form action="#" method="post" class="demoForm">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<div class="inline">
<p>
<input type="button" id="showVal" value="Select" />
</p>
<span id="display"></span>
</div>
</fieldset>
</form>
<form action="#" method="post" class="demoForm">
<fieldset>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="scroll">Orignal Greek</option>
<option value="tooltip">Original Latin</option>
<option value="con_scroll">English Translation</option>
</select>
<br>
<div class="inline">
<p>
<input type="button" id="showVal" value="Select" />
</p>
<span id="display"></span>
</div>
</fieldset>
</form>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句