Javascript 从多个HTML字段中选择，然后将总计添加到另一个列表中_Javascript_Html_Forms

Javascript 从多个HTML字段中选择，然后将总计添加到另一个列表中

javascript html forms

Javascript 从多个HTML字段中选择，然后将总计添加到另一个列表中,javascript,html,forms,Javascript,Html,Forms,我有3个HTML字段：一个文本框和两个选择列表。我试图做的是让用户在文本字段中输入一些内容，从其他两个列表中选择选项，然后单击“添加”按钮，将其全部选择添加到另一个列表中。此最终列表将由CGI脚本提交和接收例如，用户键入“Toyota”，从一个列表中选择Sedan，从第二个列表中选择2004，然后单击add。然后，“丰田轿车2004”将被添加到一个空名单。用户可以向列表中添加多个选项或从列表中删除。此列表是在提交表单时提交的列表。如果我只在Javascript中执行此操作，那么最好不要使用J

我有3个HTML字段：一个文本框和两个选择列表。我试图做的是让用户在文本字段中输入一些内容，从其他两个列表中选择选项，然后单击“添加”按钮，将其全部选择添加到另一个列表中。此最终列表将由CGI脚本提交和接收

例如，用户键入“Toyota”，从一个列表中选择Sedan，从第二个列表中选择2004，然后单击add。然后，“丰田轿车2004”将被添加到一个空名单。用户可以向列表中添加多个选项或从列表中删除。此列表是在提交表单时提交的列表。如果我只在Javascript中执行此操作，那么最好不要使用JQuery。有人能告诉我正确的方向吗？

使用此jquery插件需要：

以及一些对您有用的jquery函数：

您需要的是，当单击“添加”按钮时，将调用一个简单的javascript函数来检索：文本，selection1&selection2=>使用这些信息构建一个新选项并将其附加到结果列表中

关键javascript函数：

- document.getElementById
- document.createElement
- appendChild

在html中，表单/提交按钮必须仅位于结果列表周围

示例（）：


函数add（）{
var txt=document.getElementById（“txt”）.value；
var sel1=document.getElementById（“sel1”）.value；
var sel2=document.getElementById（“sel2”）.value；
var result=txt+“”+sel1+“”+sel2；
var resultOption=document.createElement（“选项”）；
resultOption.value=结果；
resultOption.text=结果；
document.getElementById（“selResult”）.appendChild（resultOption）；
}
价值11
价值12
价值13
价值21
价值22
价值23


结果:

这太完美了，正是我想要的。非常感谢。

<html>
    <head>
        <script>
            function add() {
                var txt = document.getElementById("txt").value;
                var sel1 = document.getElementById("sel1").value;
                var sel2 = document.getElementById("sel2").value;
                var result = txt + " " + sel1 + " " + sel2;

                var resultOption = document.createElement("option");
                resultOption.value = result;
                resultOption.text = result;
                document.getElementById("selResult").appendChild(resultOption);
            }
        </script>
    </head>
    <body>
        <input id="txt" type="text" />
        <select id="sel1">
            <option value="value11">value11</option>
            <option value="value12">value12</option>
            <option value="value13">value13</option>
        </select>
        <select id="sel2">
            <option value="value21">value21</option>
            <option value="value22">value22</option>
            <option value="value23">value23</option>
        </select>
        <input type="button" value="add" onClick="javascript:add()"/>
        <br/>
        result:
        <form action ="." method="post">
            <select id="selResult"></select>
            <input type="submit" value="submit"/>
        </form>
    </body>
</html>