如何在頁面上的其他位置顯示下拉菜單的值？

我有一個非常簡單的HTML頁面，有兩個下拉菜單，一個在左邊，一個在右邊。如何在頁面上的其他位置顯示下拉菜單的值？

我想顯示用戶在左側菜單上方選擇左側菜單的選項，並從右側菜單上方的右側菜單中選擇所選值。這兩個選項可以是相同或不同的，只是文本，不會相互影響。

到目前爲止，我已經嘗試瞭解釋爲here和here但沒有任何工作，即使我剛剛複製並粘貼到我的HTML頁面的確切示例代碼的每個解決方案。

這是我的代碼看起來像現在：

<html> 
 
<body> 
 

 
<head> 
 

 
<script type="text/javascript"> 
 

 
var select = document.getElementById('cmbitems'); 
 
var input = document.getElementById('txtname'); 
 
select.onchange = function() { 
 
    input.value = select.value; 
 
} 
 

 

 
</script> 
 

 

 
</head> 
 

 

 
<table> 
 
    <tr> 
 
     <td colspan="2">DISPLAY</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>RESULT 1 <input type="text" name="cmbitems" id="cmbitems" onClick="checkItem()"></td> 
 
     <td>RESULT 2</td> 
 
    </tr> 
 
    <tr> 
 
    
 
    <tr> 
 
     <td> 
 
     
 
     BEGINNING 
 
     
 
     
 
<select name="cmbitems" id="cmbitems"> 
 
    <option value="name1">flow</option> 
 
    <option value="name2">green</option> 
 
    <option value="name3">red</option> 
 
</select>  
 
     
 
     
 
     
 
     
 
     
 
     
 
     </td> 
 
     <td>END 
 
      
 
     
 
     
 
     </td> 
 
    </tr> 
 
</table> 
 

 

 
</body> 
 
</html>

我會很感激的是有人可以幫幫忙！試圖使這只是一個頁面沒有外部JS或JQuery調用...謝謝！

來源

2015-05-07 MicroMachine

你想顯示下降在不同的輸入框中 –

下選擇的值和文本基本上我想它看起來/工作是這樣的：
TITLE
WORD SELECTED IN MENU 1 - WORD選擇了菜單2
MENU 1 - MENU 2 – MicroMachine

有幾個問題與您的代碼：

把<script>...</script>塊在頁面的末尾，否則JS將不會找到您在您的代碼中引用的html節點，因爲th e頁面未加載
您正在定義兩個具有相同ID的html元素，並且當您試圖通過其id找到一個元素時，這會打破JS代碼。這是工作版本：

<html> 
 

 
<head></head> 
 

 
<body> 
 
    
 
<table> 
 
<tr> 
 
<td colspan="2">DISPLAY</td> 
 
</tr> 
 

 
<tr> 
 
<td>CHOICE 1 <input type="text" id="txtname" name="txtname" onClick="checkItem()"></td> 
 
<td>CHOICE 2 <input type="text" id="txtname2" name="txtname2" onClick="checkItem()"></td> 
 
</tr> 
 
<tr> 
 

 
<tr> 
 
<td> 
 

 
BEGINNING 
 

 
<select name="cmbitems" id="cmbitems"> 
 
<option value="orange">orange</option> 
 
<option value="apple">apple</option> 
 
<option value="turtle">turtle</option> 
 
</select>  
 

 
</td> 
 

 
<td>END 
 

 

 
<select name="cmbitems2" id="cmbitems2"> 
 
<option value="flow">flow</option> 
 
<option value="green">green</option> 
 
<option value="red">red</option> 
 
</select> 
 

 
</td> 
 
</tr> 
 
</table> 
 

 
<script type="text/javascript"> 
 

 
// script for left side menu 
 
var select = document.getElementById('cmbitems'), 
 
input = document.getElementById('txtname'); 
 

 
select.onchange = function() { 
 
input.value = select.value; 
 
} 
 

 

 
// script for right side menu 
 
var select2 = document.getElementById('cmbitems2'), 
 
input2 = document.getElementById('txtname2'); 
 

 
select2.onchange = function() { 
 
input2.value = select2.value; 
 
} 
 

 
</script> 
 
</body> 
 
</html>

來源

2015-05-07 08:29:11

非常感謝你曼努埃爾！這幫了很多。儘管現在，我試圖讓這兩個菜單起作用。我得到了正確的工作，但現在左邊的工作不再工作了。你可以在這裏看到結果（我不能在代碼中粘貼代碼）： [link]（http://fabulousrice.com/external-file/menu-display11。html） – MicroMachine

您必須定義不同的變量名稱，否則您會覆蓋對DOM元素的引用。我編輯了這個片段，看一看。 –

這真是太好了，謝謝！你解決了這個！我想我可以獨自編碼，但你的幫助是無價的！謝謝！ – MicroMachine

試着把你的腳本放在你的</body>之前。

並且還嘗試整理您的代碼，您的<head></head>位於您的身體標記內。

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 

 
    <table> 
 
    <tr> 
 
     <td colspan="2">DISPLAY</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>RESULT 1 
 
     <input type="text" name="cmbitems" id="cmbitems" onClick="checkItem()"> 
 
     </td> 
 
     <td>RESULT 2</td> 
 
    </tr> 
 
    <tr> 
 

 
     <tr> 
 
     <td> 
 

 
      BEGINNING 
 

 

 
      <select name="cmbitems" id="cmbitems"> 
 
      <option value="name1">flow</option> 
 
      <option value="name2">green</option> 
 
      <option value="name3">red</option> 
 
      </select> 
 

 
      <script type="text/javascript"> 
 
      var select = document.getElementById('cmbitems'); 
 
      var input = document.getElementById('txtname'); 
 
      select.onchange = function() { 
 
       input.value = select.value; 
 
      } 
 
      </script> 
 
</body> 
 

 
</html>

來源

2015-05-07 08:12:31

這似乎並不工作，當我運行它從SE – MicroMachine

你這個代碼

<html> 
<body> 

<head> 

<script type="text/javascript"> 

var select = document.getElementById('cmbitems'); 

    var input1 = document.getElementById('txtname'); 
    var input2 = document.getElementById('txtname2'); 
    select.onchange = function() { 
    input1.value = select.value; 
    input2.value = select.options[select.selectedIndex].text; 
    } 


</script> 


</head> 


    <table> 
    <tr> 
     <td colspan="2">DISPLAY</td> 
    </tr> 

     <tr> 
      <td>RESULT 1 <input type="text" name="cmbitems" id="txtname" onClick="checkItem()" /></td> 
     <td>RESULT 2 
      <input type="text" name="cmbitems" id="txtname2" onClick="checkItem()" /> 
      </td> 
    </tr> 


    <tr> 
     <td> 

     BEGINNING 


<select name="cmbitems" id="cmbitems"> 
    <option value="name1">flow</option> 
    <option value="name2">green</option> 
    <option value="name3">red</option> 
</select>  
     </td> 
     <td>END 
     </td> 
    </tr> 
</table> 


</body> 
</html>

來源

2015-05-07 08:23:13

我試圖運行你從JSFIDDLE建議的代碼，但它似乎並沒有工作 – MicroMachine

如何在頁面上的其他位置顯示下拉菜單的值？

回答

相關問題