Question

我是初学者网络应用开发者。

我有一组表单类，用于将我从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>

Answer 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>

HTML表单类未在ajax事件触发器上更新

1 个答案: