1

我的最终目标是制作一个允许用户输入的下拉菜单。我似乎能做的最好的事情是在下拉列表旁边放置一个文本框，使其看起来很相似，我遇到的问题是，每当我的下拉值更改时，我都需要更新文本框。我有一些我一直在玩的代码（如下），但它似乎并没有让我到任何地方！关于如何让它工作的任何指示，还是我弄乱了语法？（对于 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>
4

4 回答 4

0

我才意识到出了什么问题。直到我将它复制并粘贴到测试应用程序中并且我发现了问题之前，我并没有真正查看 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-06T16:52:36.257 回答
0

我还想创建一个组合框，旁边有一个自动更新的文本字段，用于新条目，并在不到一个小时的时间内就想出了这个，基于 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-02T07:45:49.000 回答
0

这是您想要的一个简单的纯 JavaScript实现。http://jsfiddle.net/24Xhn/

我们将设置标记，使选择框和其他输入框具有相似的名称和 id 属性。我们将使用类来设置/初始化 onchange 事件，并确保输入开始隐藏和禁用。通过切换“禁用”属性，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" />

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;
        }
    };
}
于 2013-07-29T17:59:16.347 回答
0

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-29T17:29:00.227 回答