html下拉菜单动态变化

时间:2014-03-06 09:10:02

标签: javascript html ajax thymeleaf

我有以下代码。我有2个选择选项菜单。每当它们中的任何一个发生变化时,我都希望向servlet发送一个AJAX请求。通过使用来自servlet的数据,我想在我的HTML中写它。

我该怎么做?

由于

<div class="p_inforoom">
    <input type="hidden" th:value="${hotelDetail.deal.id}" id="dealId" /> 

    <h3>Oda Bilgileri :<b th:text="${hotelDetail.deal.room.name}"></b></h3>
    <select name="numberOfNights" id="night" onchange="GetNights(this)">
        <option  th:each="rooms:${roomsLeft}" th:text="${rooms}" th:value="${rooms}" id="roomLeft" > </option>

    </select>
    <select name="roomType" id="room" onchange="GetRooms()">
        <option class="1" value="1" >Tek kişilik</option>
        <option class="2" selected="selected" value="2" >Çift kişilik</option>
    </select>
</div>

3 个答案:

答案 0 :(得分:0)

您将从“成功”中的ajax获得响应,您可以读取该数据并将其分配给您想要分配的任何html元素

$.ajax({
   type: 'POST',
   url: requestUrl,
   data: postData, // if any
   contentType: "application/json; charset=utf-8",
   dataType: 'json',
   success: function (data) {
      //data has the response from the url
   }
   }});

答案 1 :(得分:0)

在jquery中你可以做到这一点

$('#room').on('change',function(){
      $.ajax({
          url:"",
          dataType : "",//json text 
          type : "",//get or post
          data:"",
           success:function(data){
         alert(data.output);
});
});

答案 2 :(得分:0)

您可以使用以下选项进行选择:

$( "#room" ).change(function() {
alert( "Handler for .change() called." );
});

Source for .change

对于Ajax查询,您可以在Ajax查看信息。您可以在下面找到该页面的一个示例。

$.ajax({
    type: "POST",
    url: "some.php",
    data: { name: "John", location: "Boston" }
}).done(function( msg ) {
   alert( "Data Saved: " + msg );
})