2017-08-03 164 views
1

我选择了与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>

回答

0

尝试这样的代码:

<!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>

+0

请添加一点说明。什么是问题,你的代码如何解决它?或者为什么你的代码有改进? –

+0

它应该显示水果苹果,并根据要求只有optgorup标签是不同的选项是相同的 –

+0

请检查 http://jsfiddle.net/x5q95a11/ –

0

检查这是否是您所期望的。 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"); 
+0

没有不工作,当我从第二组选择选项,其不显示组它的名字显示第一组标签 –