如何从下拉列表中填写输入字段

Question

因此，这一直让我发疯，我在寻找一种解决方案，该方案将从下拉菜单中选择的内容填充到输入字段中。

我当前的工作解决方案（不包括下拉菜单）如下：

<form method="link" action="dualstream/index.html">
<input value = 'apolloz' name="stream1" placeholder="" required="required"    
autofocus="autofocus" />

<input type="submit" class="button" value="Click to watch the stream" />
</form>

这样，自动用“ apolloz”填充文本字段，然后按提交时，您将转到使用单词apolloz的相关页面。

我正在寻找一种解决方案，您可以从下拉列表中选择拖缆，将其选中，然后该选项填充文本字段，然后就可以提交。

我确定这是基于javascript的，因为我已经看到了使用数值的类似内容。

抱歉，这有点含糊，但是我们非常感谢您提供的所有帮助。

Answer 1

这很简单，如果您使用jquery，则可以执行此操作

$(function(){
    $("#your_select").change(function(){
        $("#your_input").val($('#your_select option:selected').val())
    });     
});

Answer 2

尝试这个

<form method="link" action="dualstream/index.html">
<input value = 'apolloz' id="txt" name="stream1" placeholder="" required="required"    
autofocus="autofocus" />
<select id="mySelect" onchange="selectionchange();">
    <option value="abc" >abc</option>
    <option value="xyz" >xyz</option>
</select>
<input type="submit" class="button" value="Click to watch the stream" />
</form>

并添加以下javascript功能

function selectionchange()
{
    var e = document.getElementById("mySelect");
    var str = e.options[e.selectedIndex].value;

    document.getElementById('txt').value = str;
}

Answer 3

假设您有一个选择selectbox #selectid ，

 $("#selectid").live("change", function() {  <br> 

 $("#stream1").val($(this).find("option:selected").attr("value"));  <br>

});

Answer 4

您还可以仅使用JavaScript来实现所选功能的onchange函数，也可以调用将所选值放入输入中的函数，例如

<select id="element1" onchange="pickvalue()"/>
<option>asad </option>
<option>asad2 </option>
</select>

您的pickvalue函数可以看起来像这样

function pickvalue()
{
document.getElementById('yourinputid').value = document.getElementById('element1').value
}