更新文本框與組合框上ValueChange事件值

我與這個終極目標是使一個下拉列表，它允許用戶輸入也。我似乎可以做的最好的是下一個文本框，使它看起來像是相似的，我遇到的問題是，只要我的下拉值發生更改，我就需要更新文本框。我有一些我一直在玩的代碼（下面），但它似乎並沒有讓我在任何地方！任何關於如何讓這個工作的指針，或者我搞砸了語法？（相當新的都JScript和HTML）更新文本框與組合框上ValueChange事件值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
<style type="text/css">  
    select 
    { 
     width:200px; 
    } 
</style> 
<head> 
    <title>Test</title> 
    <script type="text/JavaScript"> 

     var select = document.getElementById('theItems'); 
     var input = document.getElementById('stroke'); 
     function otherSelect() 
     { 
      input.value = select.value; 
     } 
    </script> 
</head> 
<body> 
<form action="" method=""> 
    <input name="stroke"/> 
    <select name="theItems" onchange="otherSelect()"> 
     <option value="item1">Item One</option> 
     <option value="item2">Item Two</option> 
     <option value="item3">Item Three</option> 
     <option value="item3">Item Four</option> 
     <option value="other">Other</option>  
    </select> 

    <div id="otherBox" style="visibility: hidden;"> 
     If other: <input name="otherField" type="text" /> 
    </div> 
</form> 


</body>

來源

2013-07-29 Volearix

這不是HTML 5，因此DOCTYPE - // W3C // DTD HTML 4.01過渡// EN，可能想就像我說的，以移除HTML5標籤 – Charles380

，漂亮的新這個東西。標籤已被刪除，但沒有答案確實幫助我達成目標。任何其他可能的投入將不勝感激！ – Volearix

由於您是JavaScript新手，您可能想嘗試一下jQuery，它真的可以簡化一些複雜的過程。我會用jQuery發佈我的答案，並用JavaScript來向你展示完成這件事更容易。 – Charles380

你應該在window.onload事件執行腳本。當腳本執行時，這些元素不可用。將腳本更改爲此

<script type="text/JavaScript"> 
window.onload = function(){ 

    var select = document.getElementById('theItems'); 
    var input = document.getElementById('stroke'); 
    function otherSelect() 
    { 
     input.value = select.value; 
    } 
} 
</script>

這樣腳本將在瀏覽器呈現HTML元素後執行。

來源

2013-07-29 17:29:00 mohkhan

下面是一個簡單純JavaScript實現你想要什麼。 http://jsfiddle.net/24Xhn/

我們要設置標記，以便選擇框和其他輸入框也有類似的名稱和id屬性。我們將使用類來設置/初始化onchange事件，並確保輸入從隱藏和禁用開始。通過切換「已禁用」屬性，是真是假，我們正在創造一種這樣的輸入或選擇不顯示時提交表單，提交表單中的jsfiddle用不同的組合，你會看到在查詢輸出URL的字符串。

HTML

<select id="items1" name="items1" class="select-other"> 
    <option value="item1">Item One</option> 
    <option value="item2">Item Two</option> 
    <option value="item3">Item Three</option> 
    <option value="item3">Item Four</option> 
    <option value="other">Other</option>  
</select> 
<input id="items1-other" name="items1-other" class="input-other" />

// setup 
var inps = document.getElementsByClassName("input-other"); 
for(var i=0; i<inps.length; i++) { 
    var inp = inps[i]; 
    // hide & disable the "other" input 
    inp.style.display = "none"; 
    inp.disabled = true; 
    // set onchange, if input is empty go back to select 
    inp.onchange = function() { 
     var val = this.value; 
     if(val == "") { 
      this.style.display = "none"; 
      this.disabled = true; 
      // get its associated select box 
      var sel = document.getElementById(this.id.replace(/-other$/i, "")); 
      sel.style.display = ""; 
      sel.disabled = false; 
     } 
    }; 
} 
var sels = document.getElementsByClassName("select-other"); 
for(var i=0; i<sels.length; i++) { 
    var sel = sels[i]; 
    // set onchange if value is other switch to input 
    sel.onchange = function() { 
     var val = this.value; 
     if(val == "other") { 
      this.style.display = "none"; 
      this.disabled = true; 
      // get associated input box 
      var inp = document.getElementById(this.id + "-other"); 
      inp.style.display = ""; 
      inp.disabled = false; 
     } 
    }; 
}

來源

2013-07-29 17:59:16

我剛剛意識到發生了什麼事。直到我將它複製並粘貼到測試應用程序中，我才真正看過html，並找出問題所在。

您需要將id標記設置爲stroke和theItems而不是名稱標記。這就是爲什麼它沒有做任何事情。我猜，還有一個複製/粘貼問題，因爲你沒有關閉html標籤，但我認爲你錯過了複製。此外，你並不需要爲了獲取input和select你只需要它們的實際功能的內部全局變量，實際上，你可以通過select到函數像這樣。

您的代碼更正：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
<head> 
    <title>Test</title> 
    <style type="text/css">  
     select 
     { 
      width:200px; 
     } 
    </style> 
    <script type="text/javascript"> 

     function otherSelect(obj) 
     {   
      var input = document.getElementById('stroke'); 
      input.value = obj.value; 
     } 
    </script> 
</head> 
<body> 
<form action="" method=""> 
    <input id="stroke" name="stroke"/> 
    <select id="theItems" name="theItems" onchange="otherSelect(this)"> 
     <option value="item1">Item One</option> 
     <option value="item2">Item Two</option> 
     <option value="item3">Item Three</option> 
     <option value="item3">Item Four</option> 
     <option value="other">Other</option>  
    </select> 

    <div id="otherBox" style="visibility: hidden;"> 
     If other: <input name="otherField" type="text" /> 
    </div> 
</form> 


</body> 
</html>

來源

2013-08-06 16:52:36 Charles380

我也想創建一個自動更新文本字段的組合框旁邊的新條目，並在不到一個小時，這一上來，基於簡單來自w3schools.com的html和javascript示例。它在我的IE瀏覽器上完美運行。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function updateField(name, value) 
{ 
    document.getElementById(name).value = value; 
} 
</script> 
</head> 
<body> 
<select name='10' onchange='updateField(this.name, this.value)'> 
    <option value='volvo'>Volvo</option> 
    <option value='saab'>Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
<input type="text" id="10" value="volvo"> 
</body> 
</html>

來源

2014-05-02 07:45:49

更新文本框與組合框上ValueChange事件值

回答

相關問題