根据选择的选项设置输入字段的值答案

【问题标题】：Set value of input field based on selected option根据选择的选项设置输入字段的值
【发布时间】：2011-09-01 09:30:12
【问题描述】：

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

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

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

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

任何想法我在这里做错了什么或其他方式来完成这个？

【问题讨论】：

标签： javascript jquery forms select

【解决方案1】：

我认为问题出在您的 case 语句中，您应该寻找字符串值（val 是字符串而不是整数）。

喜欢：

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

【讨论】：

【解决方案2】：

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

  });
});

【讨论】：

【解决方案3】：

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

在 DOM 准备好进行操作之后，我使用 jQuery 向选择列表添加了一个侦听器。这是通过向“文档”添加一个侦听器来完成的，该侦听器等待“就绪”事件，当触发该事件时，将执行传递给侦听器的函数。我还为输入字段提供了 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>

【讨论】：

感谢您的帮助！实际上我需要将另一个值传递给输入字段，而不是所选选项的值。这就是我使用 switch 语句的原因。 jQuery 请求链接 (ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) 中的“1”有点令人困惑：它不加载 v1.0，而是加载来自 Google 库的最新版本。看看源代码：它的版本是 1.6.2。

【解决方案4】：

您的“case”语句需要查找“strings”而不是“ints”。在每个 case 周围加上 ''。

【讨论】：