Question

我有BootStrap选择框，我正在尝试找到所选选项的optgroup。

这里是一个带有这些选项的引导选择框的表示：

<li rel="1">
  <div class="div-contain">
     <div class="divider"></div>
  </div>
  <dt>
     <span class="text">Option Set 1</span> <!-- I NEED THIS: Option Set 1 -->
  </dt>
  <a tabindex="0" class="opt " style="">
    <span class="text">Option 1</span>
    <i class="fa fa-ok icon-ok check-mark"></i>
  </a>
</li>

<li rel="2" class="selected">
  <a tabindex="0" class="opt " style="">
    <span class="text">Option 2</span>
    <i class="fa fa-ok icon-ok check-mark"></i>
  </a>
</li>

修改我最近的尝试基于@Soren Beck Jensen回答：

$('i.check-mark').closest('li.selected').find('dt>span').text();

这给了我＆＃39;选项集1＆＃39;对于我在第一个下拉列表中选择的所有和任何选项。

Answer 1

目前你的例子是错误的，但试试这个：

$('li.selected').find('dt').find('span').text();

Answer 2

我不一定知道您需要导航呈现的bootsdom dom元素来获得所需的麻烦。对我来说，仅访问原始的<select>标记似乎要简单得多。

jQuery(document).ready(function($){
    let picker = $('.selectpicker');
        picker.selectpicker();

    $(document).on('click', picker, function () {
        $('#group').html(
            $('option:selected', picker).parent('optgroup').prop('label') || 'no group'
        );
        $('#text').html(
            $('option:selected', picker).text()
        );
        $('#value').html(
            picker.val()
        );
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
    <optgroup label="A" >
        <option value="1">A - One</option>
        <option value="2">A - Two</option>
    </optgroup>
    <optgroup label="B">
        <option value="3">B - Three</option>
        <option value="4">B - Four</option>
    </optgroup>
    <option value="nothing">No Group</option>
    <optgroup label="C">
        <option value="5">C - Five</option>
    </optgroup>
</select>
<div>
  <div>
    Group: <span id="group"></span>
  </div>
  <div>
    Value: <span id="value"></span>
  </div>
    <div>
    Text: <span id="text"></span>
  </div>
  <div id="text"></div>
</div>

在Bootstrap Select中获取optgroup标签

2 个答案: