html下拉菜单动态变化答案

【问题标题】：html dropdown menu change dynamicallyhtml下拉菜单动态变化
【发布时间】：2014-03-06 09:10:02
【问题描述】：

我有以下代码。我有 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>

【问题讨论】：

th:value="${hotelDetail.deal.id}" 既不是 HTML 也不是 JavaScript，所以如果这是像 asp 之类的东西，请包含这些标签。
İT 的 thymeleaf 从 servlet 获取对象并将其写入 html。 Thymeleaf 的主要目标是提供一种优雅且格式良好的模板创建方式。它的 Standard 和 SpringStandard 方言允许您创建强大的自然模板，这些模板可以被浏览器正确显示，因此也可以作为静态原型工作。您还可以通过开发自己的方言来扩展 Thymeleaf。
好的，很好的推销，但我所说的只是将标签添加到您的问题中，以便人们在单击问题之前知道该问题的用途。我已经为你添加了。

标签： javascript html ajax thymeleaf

【解决方案1】：

您可以使用以下内容进行选择更改：

$( "#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 );
})

【讨论】：

【解决方案2】：

您将在“成功”中从 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
   }
   }});

【讨论】：

【解决方案3】：

在 jquery 中你可以这样做

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

【讨论】：