这是我对 onchange 事件的函数
Javascript 代码:
function optionsModel() {
var x = document.getElementById("model");
var option = document.createElement("option");
var makeValue = document.getElementById("make").value;
x.innerHTML = "";
option.text = "Model";
x.add(option);
option.innerHTML = "Model";
if (makeValue == "ALFA ROMEO") {
var opt = document.createElement('option');
opt.innerHTML = "156";
x.appendChild(opt);
}
else if (makeValue == "AUDI") {
var audi = ["A3", "A4", "TT"];
for (var i = 0; i < 3; i++) {
var opt = document.createElement('option');
opt.value = audi[i];
opt.innerHTML = audi[i];
x.appendChild(opt);
}
}
}
.aspx + HTML代码:
<body>
<div class="container form-group">
<div class="row">
<form runat="server">
<div class="col-md-6">
<select class="form-control" name="Make" id="make" runat="server" onchange=" return optionsModel()">
<option value="select" selected>Select Make</option>
<option value="ALFA ROMEO">ALFA ROMEO</option>
<option value="AUDI">AUDI</option>
</select></div>
<div class="col-md-6"> <select class="form-control" name="Model" id="model" runat="server">
<option value="Model">Model</option>
</select></div>
aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
string modelValue = this.model.Value;
string makeValue = this.make.Value;
}
当我在 Make Select 标签中选择 ALFA ROMEO 时，Model 标签将显示特定选项，但当我按下按钮时，它将为 modelValue 提供一个“Model”。这意味着来自 JS 的值未传输到服务器端。如何在服务器端获取这些值？
最佳答案
有两种方式:
- 如果要执行异步操作，请使用 AJAX，上面的链接会有帮助(推荐):
- 使用标准服务器客户端请求 (GET)，例如当 onchange 页面将重定向到/index.aspx?makeval="A"&modelval="B"
ajax 的例子如下:
客户端(aspx)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function optionsModel() {
var x = document.getElementById("model");
var option = document.createElement("option");
var makeValue = document.getElementById("make").value;
x.innerHTML = "";
option.text = "Model";
x.add(option);
option.innerHTML = "Model";
if (makeValue == "ALFA ROMEO") {
var opt = document.createElement('option');
opt.innerHTML = "156";
x.appendChild(opt);
}
else if (makeValue == "AUDI") {
var audi = ["A3", "A4", "TT"];
for (var i = 0; i < 3; i++) {
var opt = document.createElement('option');
opt.value = audi[i];
opt.innerHTML = audi[i];
x.appendChild(opt);
}
}
}
function submit() {
var makeValue = document.getElementById("make").value
var modelValue = document.getElementById("model").value;
$.ajax({
type: "POST",
url: "MakeModel.aspx/Submit",
data: "{'make':'"+makeValue+"', 'model':'"+modelValue+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function(response) {
alert(response);
}
});
}
function OnSuccess(response) {
alert(response.d);
}
</script>
</head>
<body>
<p>
<select class="form-control" name="Make" id="make" runat="server" onchange=" return optionsModel()">
<option value="select">Select Make</option>
<option value="ALFA ROMEO">ALFA ROMEO</option>
<option value="AUDI">AUDI</option>
</select>
<select class="form-control" name="Model" id="model" runat="server">
<option value="Model">Model</option>
</select>
</p>
<p><input type="submit" value="Procced" name="submit" onclick="submit()" /></p>
</body>
</html>
服务器端(Aspx.cs)
[WebMethod]
public static string Submit(string make,string model)
{
return make+" "+model;
}
Client端重要的javascript函数是submit，url是MakeModel.aspx中的define函数，data是server端submit函数的参数。
希望对您理解ajax有所帮助。
关于javascript - 从 Javascript 到 HTML 的值不会在服务器端读取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30703306/