selected-select 显示组标签和选项选择答案

【问题标题】：chosen-select shows group label and option selectselected-select 显示组标签和选项选择
【发布时间】：2017-08-04 02:08:25
【问题描述】：

我选择了带有 optdorup 和相同选项的选择，我想在选择的选择中显示 optgroup 标签和选择的选项。请检查我的代码并提出更改建议。检查这个小提琴

http://jsfiddle.net/x5q95a11

$(".chosen-select").chosen();

$(".chosen-select").on('change', function (event,el) {
  var selected_element = $(".chosen-select option:contains("+el.selected+")");
  
  var selected_value  = selected_element.val();
  var parent_optgroup = selected_element.closest('optgroup').attr('label');
  
  selected_element.text(parent_optgroup+' - '+selected_value).trigger("chosen:updated");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>

<select data-placeholder="Your Favorite Football Team" class="chosen-select" tabindex="5">
          <option value=""></option>
          <optgroup label="NFC EAST">
            <option value="Dallas Cowboy">Dallas Cowboys</option>
            <option value="New York">New York Giants</option>
            <option value="Philadelphia">Philadelphia Eagles</option>
            <option value="Washington">Washington Redskins</option>
          <optgroup>
          <optgroup label="NFC NORTH">
            <option value="Dallas Cowboy">Dallas Cowboys</option>
            <option value="New York">New York Giants</option>
            <option value="Philadelphia">Philadelphia Eagles</option>
            <option value="Washington">Washington Redskins</option>
          </optgroup>
          
        </select>

【问题讨论】：

标签： jquery html css jquery-chosen

【解决方案1】：

试试插件提供的选项。 http://jsfiddle.net/kajalc/n1cnc53c/

$(".chosen-select").chosen({include_group_label_in_selected:true});

【讨论】：

【解决方案2】：

试试这样的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<!-- JS -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $('.chosen').chosen().change(
        function (evt) {
            var label = $(this.options[this.selectedIndex]).closest('optgroup').prop('label');
            alert(label);
    });
  });
  </script>
</head>
<body>
<select class="chosen" style="width:300px;">
    <optgroup label="fruit">
        <option value="1">apples</option>
        <option value="2">pears</option>
    </optgroup>
    <optgroup label="veg">
        <option value="3">neeps</option>
        <option value="4">tatties</option>
    </optgroup>
    <optgroup label="omnivore">
        <option value="5">bear</option>
        <option value="6">rats</option>
    </optgroup>
</select>
</body>
</html>

【讨论】：

请加一点解释。问题是什么，您的代码如何解决它？或者为什么您的代码有所改进？
它应该显示水果苹果，并且根据要求只有 optgorup 标签是不同的选项是相同的

【解决方案3】：

检查这是否是您所期望的。 http://jsfiddle.net/kajalc/qnjhb2Lr/

替换

selected_element.text(parent_optgroup+' - +selected_value).trigger("chosen:updated");

与

 $('.chosen-single>span').text(parent_optgroup + ' - ' + selected_value).trigger("chosen:updated");

【讨论】：

当我从第二组中选择选项时不工作，它不显示组标签名称，它显示第一组标签名称