[英]Running three fieldsets side-by-side
我目前正在尝试在下拉菜单中选择文本的三种翻译并排显示。 到目前为止，我的第一个菜单没有问题，但是第二个和第三个菜单没有配合。 我认为这是某种嵌套错误，但我无法弄清楚。 如何使这三个字段集都可以使用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>
ID应该是唯一的，您具有3个具有ID脚本的元素和3个具有ID showVal的元素。
var sel = document.getElementById('scripts')
var el = document.getElementById('display');
返回确切的1个元素，而不是所有具有id的元素，我将其替换为
var sel = document.querySelectorAll('#scripts');
var el = document.querySelectorAll('#display');
对于ID为showVal的3，看起来您打算为每个按钮使用不同的ID： showVal, showTxt, doLoop
我假设您正在尝试以其他方式进行所有三个onclick？ 虽然最初确实做了修复，但是我选择重构整个代码
(function() { // get references to select list and display text box var sel = document.querySelectorAll('#scripts'); var el = document.querySelectorAll('#display'); var buttons = document.querySelectorAll('input[type="button"'); sel.forEach(function(elem, i){ buttons[i].onclick = function(e){ el[i].value = elem.value; }; }) }()); // immediate function to preserve global namespace
.ex { margin:auto; width:90%; padding:10px; border:outset; } select { display:inline; cursor:pointer; } form{ display:inline-block; width: 550px; }
<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> <input 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="showTxt" value="Select" /> </p> <input 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="doLoop" value="Select" /> </p> <input type="text" size="30" name="display" id="display" /> </p> </fieldset> </form> </div>
在ExtJS中，如何将两个字段集并排放置在具有hbox布局的面板中？
[英]In ExtJS, how do I place two fieldsets side-by-side in a panel with a hbox layout?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.