连续3个字段集并排侧

我正在试图让一个文本的三个平移在下拉菜单中选择它们后出现并排侧。到目前为止，我已经有了第一个菜单没有问题，但第二个和第三个菜单没有合作。我认为这是一种嵌套错误，但我无法弄清楚。如何让所有三个字段集都可以使用JavaScript？连续3个字段集并排侧

我已经有了：

<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>

来源

2016-10-15 D.C

这里是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>

来源

2016-10-15 00:27:43 Sreekanth

第二两个按钮似乎没有工作 – Gabs00

编辑的代码。它现在有效。 – Sreekanth

ID应该是唯一的，你有3个元素用id脚本，和3号showVal。

var sel = document.getElementById('scripts') 
var el = document.getElementById('display');

正好返回1元，不是所有用id元素，我

var sel = document.querySelectorAll('#scripts'); 
var el = document.querySelectorAll('#display');

替代本作的3号showVal它看起来像你的意思是使用不同的ID为每个按钮：showVal, showTxt, doLoop

我假设你正在尝试做所有这三个onclicks以不同的方式？虽然我做了修复，最初，我选择重构整个代码

(function() { 
 

 
    // get references to select list and display text box 
 
    var sel = document.querySelectorAll('#scripts'); 
 
    var el = document.querySelectorAll('#display'); 
 
\t \t var buttons = document.querySelectorAll('input[type="button"'); 
 
    
 
\t \t sel.forEach(function(elem, i){ 
 
    \t buttons[i].onclick = function(e){ 
 
     \t 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>

来源

2016-10-15 01:23:09 Gabs00

嘿，你真了不起。非常感谢！ –

@ D.C不要忘记接受 – Gabs00

连续3个字段集并排侧

回答

相关问题