javascript - 使用javascript选择下拉菜单后更改表值

这是我的网站

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}]}

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

最佳答案

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


这是因为您没有告诉脚本对收到的响应执行任何操作。

<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>'
       });
    });
 }