我是初学者网络应用开发者。
我有一组表单类,用于将我从ajax调用中提取的值转换为.jsp servlet。 ajax设置为在selectRegion表单值更改时触发。
我的问题是,在dos选项卡上正确填充表单值时,arsm选项卡未正确更新。 arsm选项卡将始终显示最初在dos选项卡上选择的任何值集。如果我在arsm选项卡中更改inputRegion,则该选项卡中的inputDOS值不会更新。
我的问题是 - 我需要在表单中添加其他内容,以便在触发$(".selectRegion").change(function(){...})
事件时,所有标签中的值都会更新吗?
div id="tabs">
<ul>
<li><a href="#dosTab">DoS Level</a></li>
<li><a href="#arsmTab">ARSM Level</a></li>
</ul>
<div id="dosTab">
<div id="dosTabs">
<form class="selectRegion" action="" method="POST">
<fieldset class="form-group">
<label for="inputRegion">Region</label>
<select class="inputRegion" name="inputRegion" class="form-control">
</select>
</fieldset>
</form>
<form class="selectDOS" action="" method="POST">
<fieldset class="form-group">
<label for="inputDOS">DOS</label>
<select class="inputDOS" name="inputDOS" class="form-control">
</select>
</fieldset>
</form>
</div>
</div>
<div id="arsmTab">
<div id="arsmTabs">
<form class="selectRegion" action="" method="POST">
<fieldset class="form-group">
<label for="inputRegion">Region</label>
<select class="inputRegion" name="inputRegion" class="form-control">
</select>
</fieldset>
</form>
<form class="selectDOS" action="" method="POST">
<fieldset class="form-group">
<label for="inputDOS">DOS</label>
<select class="inputDOS" name="inputDOS" class="form-control">
</select>
</fieldset>
</form>
</div>
</div>
<script>
$(".selectRegion").change(function(){
$(".selectRegion").val($(".inputRegion option:selected").text());
$.ajax({
url: 'get_params_DOS.jsp',
type: 'POST',
data: $(".selectRegion").serialize(),
dataType: 'json',
success: function(data) {
$(".inputDOS").empty();
$.each(data, function(){
$('<option>').val(this.DOS).text(this.DOS).appendTo('.inputDOS');
})
}
});
return false;
});
</script>
答案 0 :(得分:1)
我看不出为什么“inputDOS”选择都不会更新的原因。但是,代码中还存在一些可能导致问题的其他问题。
1)$(".selectRegion").val($(".inputRegion option:selected").text());
没有任何意义。 “selectRegion”是您已分配给两个<form>
元素的类。 .val()
无法应用于表单,只能形成<input>
或<select>
等元素。
2)$(".selectRegion").change(function()...
。同样,您正在处理表单级别的“更改”事件。虽然这个事件会被解雇,但这是非常规的。通常,更改事件将在您正在监听其更改的特定表单元素上处理(例如,选择)。如果表单中有多个元素触发了更改事件,则可能会使用您的实现获得一些意外/不需要的行为。
我在下面发布了一个工作版本作为示例。这里还有一个JSFiddle显示它正常工作:https://jsfiddle.net/6kg33a53/5/。我已经用一些硬编码的值交换了ajax代码,只是为了得到一个有效的例子,我已经将change事件移到了“select”元素上。
<div id="tabs">
<ul>
<li><a href="#dosTab">DoS Level</a></li>
<li><a href="#arsmTab">ARSM Level</a></li>
</ul>
<div class="tabs" id="dosTab">DOS
<div id="dosTabs">
<form class="selectRegion" action="" method="POST">
<fieldset class="form-group">
<label for="inputRegion">Region</label>
<select class="inputRegion" name="inputRegion" class="form-control">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
</select>
</fieldset>
</form>
<form class="selectDOS" action="" method="POST">
<fieldset class="form-group">
<label for="inputDOS">DOS</label>
<select class="inputDOS" name="inputDOS" class="form-control">
</select>
</fieldset>
</form>
</div>
</div>
<div class="tabs" id="arsmTab" hidden>ARSM
<div id="arsmTabs">
<form class="selectRegion" action="" method="POST">
<fieldset class="form-group">
<label for="inputRegion">Region</label>
<select class="inputRegion" name="inputRegion" class="form-control">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
</select>
</fieldset>
</form>
<form class="selectDOS" action="" method="POST">
<fieldset class="form-group">
<label for="inputDOS">DOS</label>
<select class="inputDOS" name="inputDOS" class="form-control">
</select>
</fieldset>
</form>
</div>
</div>
<script>
$(function() {
var Result1 = [
{ "DOS": "Value 1"},
{ "DOS": "Value 2"}
];
var Result2 = [
{ "DOS": "Value 3"},
{ "DOS": "Value 4"}
];
$(".inputRegion").change(function(){
$(".inputDOS").empty();
/* doing this bit instead of ajax call */
var selectedVal = $(this).val();
var data;
if (selectedVal == "1") { data = Result1; }
else { data = Result2; }
/* end of non-ajax alternative */
$.each(data, function(){
$('<option>').val(this.DOS).text(this.DOS).appendTo('.inputDOS');
});
return false;
});
$("#tabs li a").click(function(event) {
$(".tabs").hide();
$($(this).attr("href")).show();
});
});
</script>