更新文本框与组合框上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事件值

回答

相关问题