Question

我的最终目标是制作一个允许用户输入的下拉菜单。我似乎做的最好的是下一个文本框下拉列表，看起来它们看起来很相似，我遇到的问题是每当我的下拉列值发生变化时我都需要更新文本框。我有一些我一直在玩的代码（下图），但它似乎没有让我到任何地方！关于如何让它工作的任何指针，或者我是否搞砸了语法？（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>

Answer 1

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

Answer 2

这是一个简单的纯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" />

JS

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

Answer 3

我刚刚意识到出了什么问题。在我将其复制并粘贴到测试应用程序中之前，我没有真正查看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>

Answer 4

我还想在新的条目旁边创建一个带有自动更新文本字段的组合框，并在不到一个小时的时间内根据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>

使用ValueChange事件上的Combobox值更新文本框

4 个答案: