如何从javascript中的多个输入字段中读取值？

Question

感谢您提前对此进行调查。这基本上是我使用 javascript 的第一周，所以如果它是常见的，我很抱歉，我很感激一个类似问题的链接。

我不知道如何同时从下拉列表和文本输入中提取值，因此我可以将该信息附加到另一个容器中。这是我的html：

<div class=“container1”>
   <select class=“options_selector”>
     <option val=“admin”>admin</option>
     <option val=“user”>user</option>
   </select>
   <input class=“user_name” type="text"/>
</div>

<div class=“container2”>
   <!— append stuff here —>
</div>

所以来自容器 1 的信息应该附加到容器 2 中。例如，如果我在 options_selector 中选择了“admin”并在 user_name 输入框中输入了“freddy”，那么 container2 现在应该在其中包含“admin freddy”。然后，当我将选择框值更改为“用户”并将输入文本更改为“约翰”时 - container2 应该有另一段文本附加“用户约翰”。

我知道它可以通过更改事件来完成，但我无法弄清楚将这两条信息一起提取的总体思路。

顺便说一句，我正在使用 jquery 作为框架。

提前致谢。

Answer 1

您可以编写如下代码：

$( "select" ).change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "#user_name" ).val(str);
}).change();

JSFiddle Here!