javascript 在ValueChange事件上使用组合框值更新文本框

mcdcgff0 于 2023-04-10 发布在 Java

关注(0)|答案(5)|浏览(145)

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

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

JavaScript

来源：https://stackoverflow.com/questions/17930307/update-textbox-with-combobox-value-on-valuechange-event

5条答案

按热度按时间

dkqlctbz1#

您应该在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元素后执行。

赞(0）回复(0）举报 2023-04-10

7rtdyuoh2#

下面是一个简单的纯JavaScript实现。http://jsfiddle.net/24Xhn/
我们将设置标记，使选择框和其他输入框具有相似的name和id属性。我们将使用类来设置/初始化onchange事件，并确保输入开始时隐藏和禁用。通过切换“disabled”属性，true或false，我们将使输入或选择在表单提交时不显示，使用不同的组合在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;
        }
    };
}

赞(0）回复(0）举报 2023-04-10

mzmfm0qo3#

我才意识到哪里出了问题，我并没有真正地查看html，直到我将它复制并粘贴到一个测试应用程序中，我才发现了问题所在。
您需要将id标记设置为stroke和theItems，而不是名称标记。这就是为什么它什么都不做。我猜，还有一个复制/粘贴问题，因为您没有关闭html标记，但我认为您只是错过了复制。另外，你并不需要全局变量来获取，和，你只需要在函数中使用它们，你可以像这样把，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>

赞(0）回复(0）举报 2023-04-10

tcbh2hod4#

我还想创建一个组合框，旁边有一个自动更新的文本字段，用于新条目，并在不到一个小时的时间内完成了这个，基于w3schools.com的简单html和javascript示例。

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

赞(0）回复(0）举报 2023-04-10

bfhwhh0e5#

我想你改一下name -〉id。我想这段代码会更适合你

<form action="" method="">
<input id="stroke"/>
<select id="theItems" onchange="otherSelect()">
    <option value="item1">Item One</option>
    <option value="item2">Item Two</option>
    <option value="item3">Item Three</option>
    <option value="item4">Item Four</option>
    <option value="other">Other</option>      
</select>

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

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

赞(0）回复(0）举报 2023-04-10

我来回答

javascript 在ValueChange事件上使用组合框值更新文本框

5条答案

相关问题

热门标签

最新问答