javascript - 从下拉列表 "select"标记获取值并存储在 DB ASP.net 中

Question

因此，我正在开发一种显然可以从用户那里获取值的表单，包括文本值和他们从下拉列表中选择的项目。我在寻找一种方法来获取从下拉列表中选择的值并将其作为参数值之一存储在数据库中时遇到问题。

这是我的 select 标签的 javascript 和 html 代码，我用它来创建包含 4 个项目的下拉列表，如图所示。

    <script type="text/javascript">
        $(document).ready(function () {

            $('#packageList').change(function () {
                var value = $(this).val(); var toAppend = ''; var onePrice = 
        '$ 399';
                var threePrice = '$ 699'; var sixPrice = '$ 899'; var 
         twelvePrice = '$ 2999';

                if (value == 1) {
                    toAppend = "<input type='textbox'>"; 
    $("#container").html(onePrice); return;
                }
                if (value == 2) {
                    toAppend = "<text='$ 699'>"; 
    $("#container").html(threePrice); return;
                }
                if (value == 3) {
                    toAppend = "<text='$ 899 >"; 
    $("#container").html(sixPrice); return;

                }
                if (value == 4) {
                    toAppend = "<text='$ 2999'>"; 
   $("#container").html(twelvePrice); return;
                }
            });

        });
    </script>

这是我的表单正文中的 html 代码。

  <select id="packageList" name="D1">
    <option value="0">Select </option>
    <option value="1">1 Months </option>
    <option value="2">3 Months </option>
    <option value="3">6 Months </option>
    <option value="4">12 Months </option>
     </select> </p>
     &nbsp;<div id="container"></div>

当我的用户单击“提交”表单按钮时，输入的值将添加到我的数据库中的目标表中的参数中，我能够获取所有参数的值(我的表单包含文本框，和下拉列表)但是我在弄清楚如何获取从下拉列表中选择的值并将其存储在数据库中时遇到问题。请注意，上面代码中所示的下拉列表是使用标签创建的，我无法在后台的 C# 代码中查看它的变量。

非常感谢任何帮助。谢谢。

Answer 1

乍一看，从 val() 获得的值是 typeof string (尽管在 == 中可以比较“1”和 1，但使用 === 的最佳实践将使您的语句为 false)

在 jQuery 中，有一个叫做 $.ajax 的东西，你需要它来异步发回你的数据(任何方法，包括 get、post、put 等都可以用在ajax；HTML 表单一般只允许 get 和 post)

由于您没有显示其他输入文本框，我只是为此输入假设一些简单的名称。

$text = $("#text");
$content = $("#content");
$packageList = $("#packageList");
var data = {
    "text": $text().val(),
    "D1": $packageList.val()
};
$.ajax({
    "url": "api-endpoint-accepting-post", // example: "/post-form", if your API endpoint is /post-form
    "type": "POST", // HTTP method, it is common to use GET, POST; and others such as PUT, DELETE, or some other WebDAV method, etc., that normally browser cannot do these method to pass request to server via HTML form
    "data": JSON.stringify(data),
    // other stuff you might need to configure
    "contentType": "application/json; charset=utf-8",
    "dataType": "json", // if you are receiving from server in json format
    //
    "success": function (result, textStatus, jqXHR) {
        console.log(result);
        // do whatever you want if post to server is a success, and server return something to you
        // maybe update another textbox
        var json = JSON.parse(result);
        $("#container").text(json["some-property-sent-back-from-server"]);
    },
    "error": function (jqXHR, textStatus, errorThrown) {
        // can also look at those parameters above for the reason
        console.error("error");
    }
});

此代码片段假设服务器需要 JSON 字符串(ajax 中的数据对象)；对于表单，您需要配置 ajax 选项(与数据、类型、url 等级别相同)