如何使用 jQuery 在 Bootstrap 中预选 <select> 列表项答案

【问题标题】：How to preselect a <select> list item in Bootstrap using jQuery如何使用 jQuery 在 Bootstrap 中预选 <select> 列表项
【发布时间】：2016-02-07 01:20:15
【问题描述】：

我有以下引导标记和 jQuery 脚本，并且我的选择列表项没有被预先选择：

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="serviceType">Service Type</label>
      <div class="col-md-1">
        <select id="serviceType" name="serviceType" class="form-control">
          <option value="S">S</option>
          <option value="T">T</option>
          <option value="X">X</option>
        </select>
        <script>
          //$('[name=serviceType]').val( T ); // not working
          //$('#serviceType').val( T ); // not working
          //$('[name=serviceType]').val( "T" ); // not working
          $('#serviceType').val( "T" ); // not working
        </script>
      </div>
    </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

谁能看出 jQuery 有什么问题？谢谢。

附注 #1： 我的 jQuery CDN 库链接就在结束标记之前，而这个容器和 javascript 在网络文档中更高。这有关系吗？

附注 #2： 为完整视图添加了 jQuery CDN 库。

【问题讨论】：

我为您创建了一个演示 jsfiddle.net/9gjjj1tm。请检查。

标签： jquery select twitter-bootstrap-3 selecteditem

【解决方案1】：

您需要在页面加载时调用此代码。您应该使用 $( '#serviceType' ).val('T')

请检查下面的代码

  <!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="serviceType">Service Type</label>
  <div class="col-md-1">
    <select id="serviceType" name="serviceType" class="form-control">
      <option value="S">S</option>
      <option value="T">T</option>
      <option value="X">X</option>
    </select>
    <script>
     $(function() {
      $( '#serviceType' ).val('T'); 
        });
    </script>
  </div>
</div>

不要忘记包含 jQuery 文件。

【讨论】：

感谢@prashanth。我会测试一下。我的 jQuery 存在，但位于文档的底部 - 在本节之后。是这个原因吗？
在我的网络文档@prashanth 中不起作用。这个

【解决方案2】：

你可以试试这个

$(document).ready(function () {

$('select option[value="T"]').attr("selected",true); });

【讨论】：

在我的网络文档@Francis 中不起作用。这个
您好 H.Ferrence，您的代码运行正常，我已经对其进行了测试。首先导入 jquery 库，然后再导入其他内容。
“首先导入 jquery 库，然后再导入其他任何东西”——这意味着 jQuery CDN 库必须放在我的脚本之上才能使其工作？ lib 和我的脚本的放置和顺序很重要吗？
是的，一旦我将脚本移到 jquery 库之后，它就可以工作了。所以放置和顺序很重要。
好的，学习一些东西，因为我一直认为$(document).ready(function () {...}); 意味着我可以将 CDN 库放在文档的底部。

【解决方案3】：

$('#serviceType').val('T');

作品

【讨论】：