Fatal编程技术网
  • javascript/
  • Javascript 在ValueChange事件中使用Combobox值更新文本框

Javascript 在ValueChange事件中使用Combobox值更新文本框

javascript html

Javascript 在ValueChange事件中使用Combobox值更新文本框,javascript,html,Javascript,Html,我的最终目标是制作一个允许用户输入的下拉列表。我能做的最好的事情就是在下拉列表旁边放一个文本框，让它们看起来很相似。我遇到的问题是，每当我的下拉列表值发生变化时，我都需要更新文本框。我有一些代码，我一直在玩（下面），但它似乎没有得到我任何地方！有没有关于如何让它工作的建议，或者我把语法搞乱了？（对于jscript和html来说都是全新的） 挑选 { 宽度：200px； } 试验 var select=document.getElementById（'items'）； var input=doc

我的最终目标是制作一个允许用户输入的下拉列表。我能做的最好的事情就是在下拉列表旁边放一个文本框，让它们看起来很相似。我遇到的问题是，每当我的下拉列表值发生变化时，我都需要更新文本框。我有一些代码，我一直在玩（下面），但它似乎没有得到我任何地方！有没有关于如何让它工作的建议，或者我把语法搞乱了？（对于jscript和html来说都是全新的）


挑选
{
宽度：200px；
}
试验
var select=document.getElementById（'items'）；
var input=document.getElementById（'stroke'）；
函数otherSelect（）
{
input.value=select.value；
}
项目一
项目二
项目三
项目四
其他
如果其他：
您应该在
窗口中执行脚本。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>


window.onload=函数（）{
var select=document.getElementById（'items'）；
var input=document.getElementById（'stroke'）；
函数otherSelect（）
{
input.value=select.value；
}
}
这样，脚本将在浏览器呈现HTML元素后执行。

下面是一个简单的纯JavaScript实现

我们将设置标记，使选择框和其他输入框具有相似的名称和id属性。我们将使用类来设置/初始化onchange事件，并确保输入以隐藏和禁用的方式启动。通过切换“disabled”属性true或false，我们可以使输入或select在表单提交时不显示，在JSFIDLE中以不同的组合提交表单，您将在URL的查询字符串中看到输出

HTML


项目一
项目二
项目三
项目四
其他
JS

//设置
var inps=document.getElementsByClassName（“输入其他”）；

对于（var i=0；i我刚刚意识到问题出在哪里。我没有真正查看html，直到我将其复制并粘贴到测试应用程序中，才发现问题所在

您需要将
id
标记设置为
stroke
和
ittems
而不是name标记。这就是为什么它没有做任何事情。我猜，也有一个复制/粘贴问题，因为您没有结束
html
标记，但我假设您刚刚错过了复制。此外，您也不需要全局变量In为了检索
输入
和
选择
，您只需要在实际函数中使用它们，您实际上可以像这样将
选择
传递到函数中

您的代码已更正：


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




试验
挑选
{
宽度：200px；
}
功能选择（obj）
{           
var input=document.getElementById（'stroke'）；
input.value=obj.value；
}
项目一
项目二
项目三
项目四
其他
如果其他：

我还想创建一个组合框，旁边有一个自动更新的文本字段，用于输入新条目。基于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>




函数updateField（名称、值）
{
document.getElementById（name）.value=value；
}
沃尔沃汽车
萨博
梅赛德斯
奥迪

这不是html 5，因此doctype-//W3C//DTD HTML4.01 Transitional//EN可能想要删除html5标记，就像我说的，这是一个非常新的东西。标记已经被删除，但还没有答案真正帮助我达到我的目标。任何其他可能的输入都将不胜感激！因为你是javascript新手，你可能想要尝试jQuery，这是真的ly简化了一些复杂的过程。我将用jQuery和javascript发布我的答案，向您展示实现这一点是多么容易。

// 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;
        }
    };
}



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



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