在下拉菜单中更改项目时填写输入字段(html,javascript)

时间:2016-10-11 21:56:14

标签: javascript html

我试图熟悉javascript以及如何将其与html一起使用。我想要做的是非常简单,当一个值在dropdownmenu id中改变时,比如用字符串填充输入字段。

这是HTML:

<div>
    <input type="text" id="field_id" placeholder="Using..." style="width: 400px">
    <select style="width: 180px" onchange="Test()">
        <option value="" disabled selected>Select</option>
        {% for stuff in stuffs%}
        <option value="{{stuff}}">{{stuff}}</option>
        {% endfor %}                    
    </select>
</div>

同一文档中的javascript:

<script>
    function Test()
    {
      document.getElementById(field_id).text = "asdsads";
    }   
</script>

为什么输入字段不会被字符串“asdsads”填充?

2 个答案:

答案 0 :(得分:1)

您应该将参数赋予getElementById字符串:

document.getElementById("field_id").value = "asdsads";

注意field_id周围的引号。

在您的代码中,field_id是一个(未定义的)变量。您应该在浏览器的Javascript控制台中看到错误/警告。

第二:要设置输入字段的值,您需要设置value属性,而不是text属性。

以下是您的例子:https://jsfiddle.net/oapzL020/

答案 1 :(得分:1)

您需要考虑使用value属性初始化输入元素并测试其值:

document.getElementById("field_id").value = "some value"