[英]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.