如何使用Javascript根据选择框中的数据填充文本字段？

Question

如何使用Javascript根据选择框中的数据填充文本字段？

4

我知道一定程度的PHP，但对JavaScript了解甚少。基本上，我想要的是：如果用户从HTML表单选择框中选择x项，则x项的描述性文本将自动填充在其下方的HTML表单输入文本框中。有没有人有现成的样例代码，我可以使用或编辑来满足我的需求？

- Citizen

让我说得更清楚一些。这两个字段都是同一个表单的一部分。在提交表单之前，如果用户从下拉框中选择了一项，它将使用与所选项目相关联的文本为他们填充文本字段。例如，用户从下拉框中选择“蓝色”作为他们最喜欢的颜色。立即，在下面的文本字段中填充了句子“您可能会喜欢天空的颜色”。我希望这有意义。 - Citizen

Ryan，"你可能会喜欢天空的颜色"这段文本在哪里？ - Rob Booth

3个回答

3

基于http://w3schools.com/js/tryit.asp?filename=tryjs_putmore上的例子。

<html>
<head>
<script type="text/javascript">
function moveNumbers()
{
var no=document.getElementById("no");
var option=no.options[no.selectedIndex].text;
document.getElementById("result").value=option;
}
</script>
</head>

<body>
<form>
Select numbers:<br />
<select id="no" onchange="moveNumbers()">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>
<input type="text" id="result" size="20">
</form>
</body>

请查看http://w3schools.com/htmldom/dom_obj_select.asp和http://w3schools.com/htmldom/dom_events.asp了解更多信息。

- jrummell

1

如果输入框有一个ID会很有帮助：

<input type="text" id="someinput" value="" />

你需要在选择框上添加一个事件监听器。

<select id="someselect">...</select>

在JavaScript中：

document.getElementById('someselect').onchanged = function() {
var selem = document.getElementById('someselect'); 
document.getElementById('someinput').value = selem.options[selem.selectedIndex].value;
}

这只是一个非常初步的想法。

- James Black

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob Booth · Accepted Answer

这是一个使用纯JavaScript编写且不使用任何库的工作副本：

<script type="text/javascript">
    // Pre populated array of data
    var myData = new Array();
    myData[1] = 'Some text';
    myData[2] = 'Some other text';
</script>     
<form id="example" name="example">
        <select id="selector" name="selector">
            <option value="" selected></option>
            <option value=1>One</option>
            <option value=2>Two</option>
        </select>
        <br />
        <input type="text" value="" id="populateme" name="populateme" />
    </form>

    <script type="text/javascript">
        document.example.selector.onchange = updateText;

        function updateText() {
          var obj_sel = document.example.selector;
          document.example.populateme.value = myData[obj_sel.value];
    }
    </script>