如何使用jQuery预选twitter bootstrap下拉选项?

时间:2014-03-03 23:15:06

标签: jquery twitter-bootstrap twitter-bootstrap-3

假设我在加载页面时预先选择了C选项,并在页面上添加了一个附加到网址的散列值(例如http://www.example.com/#C)。

我知道如何从哈希中获取值,但是我在选择选项时遇到了麻烦。

我使用jQuery尝试了以下内容:

$('.dropdown ul > li > a:contains("C")').click();
$('.dropdown ul > li > a:contains("C")').trigger('click');

但下拉菜单中选择的值不会改变

<div class="dropdown open" style="float:none;margin-top:5px;" id="select-group-0">
  <input type="hidden" value="A" name="your-category" id="undefined" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required">
  <a id="contactform_type" class="dropdown-toggle dropdown-toggle-filter fp_input contactform_dropdown" data-toggle="dropdown" href="#">A</a>
  <ul class="dropdown-menu dropdown-menu-filter">
     <li><a tabindex="-1" data-value="A">A</a></li>
     <li><a tabindex="-1" data-value="B">B</a></li>
     <li><a tabindex="-1" data-value="C">C</a></li>
  </ul>
</div>

1 个答案:

答案 0 :(得分:1)

我不确定您是否尝试将下拉列表的选定值更改为“C”,或者只是在下拉列表中突出显示“C”...假设您正在尝试“更改选择下拉到C “的值,您可以使用类似的东西..

/* update dropdown text when item clicked */
$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.dropdown').find('.dropdown-toggle').html(selText);
});

/* preselect value */
var selectedValue = "C";
$('.dropdown ul > li > a:contains("'+selectedValue+'")').parent('li').addClass("active");
$('.dropdown ul > li > a:contains("'+selectedValue+'")').trigger('click');

演示:http://www.bootply.com/118698

如果您只是尝试在下拉列表中突出显示“C”,则只需删除触发调用(“点击”)。