Twitter bootstrap 下拉列表中的设置字段答案

【问题标题】：Twitter bootstrap set field from dropdownTwitter bootstrap 下拉列表中的设置字段
【发布时间】：2014-01-11 00:12:13
【问题描述】：

我在前端使用 twitter 引导程序。我有一个文本字段和旁边的下拉菜单：

 <div class="input-group">
     <input type="text" class="form-control" name="opening_hr" id="opening_hr" required>

      <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle"
      data-toggle="dropdown"><span class="caret"></span></button>
      <ul class="dropdown-menu pull-right" id="opening_hr_select">

      @foreach($hours as $hour)
         <li><a>{{$hour}}</a></li>
      @endforeach

   </ul>
 </div>

我尝试创建一个 javaScript 函数，该函数接受两个参数：我要编辑的文本字段和已选择的下拉菜单：

 $(function(){

   $(".dropdown-menu li a").click(function(){

   var elem = document.getElementById("opening_hr");

   elem.text($(this).text());
   elem.val($(this).text());
 });

 });

上面是没有参数的更简单的函数我试过测试（没有运气）。我想要实现的是获取选定的值并将其设置为文本字段值。

请帮忙，谢谢。

【问题讨论】：

标签： javascript html twitter-bootstrap laravel-4

【解决方案1】：

问题在于变量 elem 不是 jQuery 对象，因此尝试调用 val 将不起作用。由于您已经在使用 jQuery，请将 elem 赋值更改为：

var elem = $("#opening_hr");

并设置输入使用：

elem.val($(this).text());

或将它们组合在一起：

$("#opening_hr").val( $(this).text() )

【讨论】：

【解决方案2】：

我建议深入研究 Jquery。它的主要特点之一是支持选择器，所以在你使用 Jquery 时，你应该使用它来访问 DOM 元素，而不是使用 getelementbyid。

ps：对不起，我的 ipad 讨厌大写字母。

【讨论】：

【解决方案3】：

找到了一种简单的方法来实现我想要完成的任务，而无需使用 jQuery 或 JavaScript。以下是我的解决方案：

<!-- Opening times -->
     <div class="row">
        <div class="col-lg-3">
           <label for="opening_time">Opening Time</label>

                 <div class="input-group">
                  <span class="input-group-addon">Hour</span>
                  <input type="number" max="24" min="1" class="form-control" name="opening_hr"
                                       id="opening_hr"
                                       required>

                   <span class="input-group-addon">Minute</span>
                   <input type="number" max="60" min="0" class="form-control" name="opening_min"
                                       id="opening_min"
                                       required>
                   </div>
         </div>
      </div>

【讨论】：