使用javascript选择下拉列表后更改表值

Question

这是我的网站

JSP & Javascript

<div class="col-xs-3 col-md-8">
        <div class="panel panel-default">
        <div class="panel-body">
        <div class="row">
        <div class="col-xs-3 col-md-3">
        <select class="form-control" id="pertahun" name="dropdown">
                <option selected="selected">PILIH</option>
                <c:forEach var="i" begin="${th1}" end="${th}">
                <option> <c:out value="${i}"/></option>
                </c:forEach>
            </select>
            </div>
            </div>
            <div class="row">
            <div class="col-xs-1 col-md-4" id="tabel"></br>
            <table id="tab" class="table">
                <thead><tr>
                    <th align="center">#</th>
                    <th align="center">Merk</th>
                    <th align="center">Tanggal</th>

                </tr></thead>
                <tbody>
                <c:forEach items="${merk}" var="m">
                <tr>
                    <td>${m.id_mntnc_tkn}</td>
                    <td>${m.merk}</td>
                    <td>${m.tahun}</td>
                </tr>
               </c:forEach>
                </tbody>
                </table>
            </div>
            </div>
        <p></p>

        </div>
        </div>

        </div>

这是js：

<script type="text/javascript">
  $('#pertahun').change(function(){
     var str = $('#pertahun').find(":selected").text();
     //alert(str);
     $.ajax({
         url : 'merk-edc-mslh.html',
         data: {"year":str},
         dataType : "json",
         cache : false,
         contentType : 'application/json; charset=utf-8',
         type : 'GET'
    });
});
</script>

这是我的控制器

@RequestMapping(value = "/merk-edc-mslh", method = RequestMethod.GET)
    public @ResponseBody
    String getmerk(@RequestParam("year") String year,Map<String, Object> map) throws JSONException {

        DateFormat dateFormat = new SimpleDateFormat("yyyy");
        Date date = new Date();
        if("PILIH".equals(year)){
            year = dateFormat.format(date);
        }
        JSONArray result = new JSONArray();
        RestTemplate tmp = new RestTemplate();
        String url = ut+"/bar/dash-merk/"+year;
        HttpHeaders headers = new HttpHeaders();
        headers.setAccept(Arrays.asList(MediaType.APPLICATION_JSON));
        tmp.getMessageConverters().add(new MappingJackson2HttpMessageConverter());

        dash_merkModel[]dash=tmp.getForObject(url, dash_merkModel[].class);

        JSONObject jsonObj = new JSONObject();
        jsonObj.put("merk", dash);
        return jsonObj.toString();
    }

以及选择下拉菜单时的此 JSON 消息

{"merk":[{"merk":"ingenico","tahun":"2015","sn":"14325CT22949427","id_mntnc_tkn":10}]}

但是为什么数据表里没有变化呢？

Answer 1

但是为什么在数据表中没有改变呢？

这是因为你没有告诉你的脚本对你得到的响应做任何事情。

<script type="text/javascript">
  $('#pertahun').change(function(){
     var str = $('#pertahun').find(":selected").text();
     //alert(str);
     $.ajax({
         url         : 'merk-edc-mslh.html',
         data        : {"year":str},
         dataType    : "json",
         cache       : false,
         contentType : 'application/json; charset=utf-8',
         type        : 'GET',
         success     : function(data){ // this is where you do something with response
            console.log(data);

            // The below is my assumption like filter the trs which do not contain 
            // 2015
            var yr = data.merk[0].tahun; // 2015
            $('#tab tbody').find('tr').filter(function(tr){
               $(tr).find('td').last().text().trim() !== yr;
            }).hide();
         }
    });
});
</script>

---

根据您的评论，您可以这样做：

 success     : function(data){
    var resp = data.merk[0]; // 2015
    $('#tab tbody').append(function(){
       return $('<tr>',{
          html:'<td>'+ resp.id_mntnc_tkn +'</td><td>' + resp.merk + '</td><td>'+ resp.tahun +'</td>'
       });
    });
 }

Answer 2

我希望您将更改事件函数保存在适当的位置，并且正在调用更改回调。如果没有你可以把脚本jQuery $(document).ready() 函数。

现在您的下拉更改事件被触发并正在调用回调。但是我看不到你在 ajax 调用完成后对响应做任何事情。 IE。您需要一个成功回调，该回调将在 ajax 调用成功完成后执行。之后，您必须根据您的发展来处理响应。所以ajax调用会像

    $.ajax({
             url : 'merk-edc-mslh.html',
             data: {"year":str},
             dataType : "json",
             cache : false,
             contentType : 'application/json; charset=utf-8',
             type : 'GET',
             success: function(response, status){
               for (var i = 0; i < response.merk.length; i++) {
                   var m = response.merk[i];
                   var tableHtml += "<tr>" 
                       +"<td>"+ m.id_mntnc_tkn+"</td>"
                       + "<td>"+ m.merk+"</td>"
                       +  "<td>"+ m.tahun +"</td>"
                       + "</tr>";
               }

             $('#tab tbody').html(tableHtml);
             }
        });

我没有jsp绑定的经验。通常只使用jquery的人会生成表格html并直接放在选择表格中。 AngularJs/reactJs 等客户端框架将通过更新绑定的对象/变量来自动更新表格