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

Question

I´m creating a booking form for a group of hotels. 我正在为一组酒店创建预订表格。 Each hotel has a special offer page, which can be accessed by adding the parameter &ratePlanID=xxx to the request URL. 每个酒店都有一个特价页面，可以通过在请求URL中添加参数&ratePlanID=xxx来访问该页面。

How can I add the ratePLanID dynamically when a user selects the hotel from a dropdown list? 当用户从下拉列表中选择酒店时，如何动态添加ratePLanID？

I´ve tried to write a function that sets the value of an input field with the correct ratePlanID when a user selects the hotel, but I can´t get it to work. 我试图编写一个函数，当用户选择旅馆时，使用正确的ratePlanID设置输入字段的值，但是我无法使其正常工作。

This is what I came up with: http://jsbin.com/oduhet/3/edit#javascript,html,live 这是我想出的： http : //jsbin.com/oduhet/3/edit#javascript,html,live

Any ideas what I did wrong here or another way to accomplish this? 有什么想法我在这里做错了，还是另一种方法来做到这一点？

Answer 1

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

replace this in you javascript code 替换为您的JavaScript代码

And for switch case 对于开关盒

$(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

I think the problem is in your case statement you should be looking for string values (vals are Strings not Ints). 我认为问题在于您的case语句中，您应该在寻找字符串值（值是字符串而不是Ints）。

Like: 喜欢：

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

Your "case" statement needs to look for "strings" not "ints". 您的“ case”语句需要查找“ strings”而不是“ ints”。 Put '' around each case. 在每种情况下加上“”。

Answer 4

A few things. 一些东西。 I'm using a much newer version of JQuery since I'm not sure what v1.0 is missing. 我使用的是JQuery的更新版本，因为我不确定缺少什么v1.0。

I add a listener to the select list using jQuery AFTER the DOM Is ready to be manipulated. 在准备好操作DOM之后，我使用jQuery将侦听器添加到选择列表中。 This is done by adding a listener to the 'document' waiting for the 'ready' event which, when fired, will execute the function passed to the listener. 这是通过在“文档”中添加一个侦听器以等待“就绪”事件来完成的，该事件在触发时将执行传递给侦听器的功能。 I've also given the input field the id ratePlanInput so that I can refer to it in the JavaScript. 我还为输入字段指定了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 个解决方案

解决方案1
0 2011-09-01 09:35:24

解决方案2
0 已采纳 2011-09-01 09:35:57

解决方案3
0 2011-09-01 09:37:30

解决方案4
0 2011-09-01 09:51:57

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

问题描述

4 个解决方案

解决方案1 0 2011-09-01 09:35:24

解决方案2 0 已采纳 2011-09-01 09:35:57

解决方案3 0 2011-09-01 09:37:30

解决方案4 0 2011-09-01 09:51:57

解决方案1
0 2011-09-01 09:35:24

解决方案2
0 已采纳 2011-09-01 09:35:57

解决方案3
0 2011-09-01 09:37:30

解决方案4
0 2011-09-01 09:51:57