0

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

例如,用户输入“Toyota”并从一个列表中选择 Sedan,从第二个列表中选择 2004,然后单击添加。然后,“Toyota Sedan 2004”将被添加到一个空列表中。用户可以将多个选择添加到列表中或从列表中删除。而这个列表就是表单提交时提交的列表。如果我只在 Javascript 中执行此操作,则最好不要使用 JQuery。谁能指出我正确的方向?

4

2 回答 2

1

您需要的是,当单击“添加”按钮时,会调用一个简单的 JavaScript 函数来检索:文本、选择 1 和选择 2 => 使用这些信息构建一个新选项,并将其附加到结果列表中。

关键的javascript函数:

- document.getElementById
- document.createElement
- appendChild

在您的 html 中,表单/提交按钮只能在您的结果列表中。

示例(jsfiddle 链接):

<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>
于 2012-10-13T07:45:02.370 回答
0

使用需要用户这个 jquery 插件:

  1. jQuery 表单
  2. Jquery 自动选项卡
  3. jQuery UI

还有一些对您有用的 jquery 函数:

  1. . 阿贾克斯()
  2. 前置()
  3. 。在()
于 2012-10-13T07:24:30.840 回答