Question

我正在为一组酒店创建一个预订表格。每家酒店都有一个特价商品页面，可以通过将参数&ratePlanID=xxx添加到请求网址来访问。

当用户从下拉列表中选择酒店时，如何动态添加ratePLanID？

我曾尝试编写一个函数，当用户选择酒店时，使用正确的ratePlanID设置输入字段的值，但我无法使其工作。

这就是我想出的：http://jsbin.com/oduhet/3/edit#javascript,html,live

我在这里做错了什么或其他方法来实现这个目标？

Answer 1

$(document).ready(function() {
  $('#destination').change(function() {
    var hotel = $('#destination').val();
   $('[name=ratePlanID]').val(hotel);
  });
});

在你的javascript代码中替换它

对于开关案例

$(document).ready(function() {
  $('#destination').change(function() {
    var hotel = $('#destination').val();
   switch(hotel)
{
  case '15205': 
    $('[name=ratePlanID]').val('1');
    break;
  case '15206': 
    $('[name=ratePlanID]').val('2');
    break;
      case '15207': 
    $('[name=ratePlanID]').val('3');
    break;
}

  });
});

Answer 2

我认为问题出在你的case语句中，你应该寻找字符串值（vals是字符串而不是Ints）。

像：

switch(hotel)
    {
      case '15205': 
        $('[name=ratePlanID]').val(1);
        break;
      case '15206': 
        $('[name=ratePlanID]').val(2);
        break;
          case '15207': 
        $('[name=ratePlanID]').val(3);
        break;
    }

Answer 3

您的“案例”声明需要查找“字符串”而非“整数”。把''围绕每个案例。

Answer 4

一些事情。我正在使用更新版本的JQuery，因为我不确定v1.0缺少什么。

我准备好操作DOM后，使用jQuery在选择列表中添加一个监听器。这是通过向'document'添加一个监听器来完成的，该监听器等待'ready'事件，当被触发时，它将执行传递给监听器的函数。我还给输入字段id ratePlanInput，以便我可以在JavaScript中引用它。

<!DOCTYPE html><html><head>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {    // add listener for document ready
    $('#destination').change(function() {     //add a listener for change
      var selectedValue = $(this).find(":selected").val();
      $('#ratePlanInput').val(selectedValue);
    });

  });


</script>

</head><body>


<form action="http://www.example.com" method="get">

  <select name="hotelID" id="destination">
    <option value="" class="first_option" selected="selected" disabled="disabled">Select a property:</option> 
    <option value="15205">City Hotel</option> 
    <option value="15206">Beach Hotel</option>
    <option value="15207">Business Hotel</option> 
  </select>

  <input type="text" name="ratePlanID" value="" id="ratePlanInput" />           

  <button type="submit">Check availability</button>     

</form>  


</body></html>

根据所选选项设置输入字段的值

4 个答案: