Skip to content
Advertisement

Chosen JS – Add the optgroup to the selected item

I want to find the way to enter the optgroup label into the inserted search-choice item, when the user select a option. With the format [optgroup]-[option].

The problem is that by default there is no a clear way to do it. Any suggestions on how to achieve this behavior?

Thank you in advance.

This is the default behavior

enter image description here

This is what I am trying to do

Chosen JS

Advertisement

Answer

Working fiddle

You can achieve that by receiving a second parameter of on() method that contains an object with an attribute selected contains a value element if it exists or the text element (like the current case) :

$(".chosen-select").on('change', function (event,el) {

Then you can get the closest optgroup and concatenate the both then update the option text :

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");

Check example below, Hope this helps.

$(".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>
<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select multiple data-placeholder="example" style="width:350px;" class="chosen-select" tabindex="5">
  <option value=""></option>
  <optgroup label="NFC EAST">
    <option>Dallas Cowboys</option>
    <option>New York Giants</option>
    <option>Philadelphia Eagles</option>
    <option>Washington Redskins</option>
  </optgroup>
  <optgroup label="NFC NORTH">
    <option>Chicago Bears</option>
    <option>Detroit Lions</option>
    <option>Green Bay Packers</option>
    <option>Minnesota Vikings</option>
  </optgroup>
  <optgroup label="NFC SOUTH">
    <option>Atlanta Falcons</option>
    <option>Carolina Panthers</option>
    <option>New Orleans Saints</option>
    <option>Tampa Bay Buccaneers</option>
  </optgroup>
  <optgroup label="NFC WEST">
    <option>Arizona Cardinals</option>
    <option>St. Louis Rams</option>
    <option>San Francisco 49ers</option>
    <option>Seattle Seahawks</option>
  </optgroup>
  <optgroup label="AFC EAST">
    <option>Buffalo Bills</option>
    <option>Miami Dolphins</option>
    <option>New England Patriots</option>
    <option>New York Jets</option>
  </optgroup>
  <optgroup label="AFC NORTH">
    <option>Baltimore Ravens</option>
    <option>Cincinnati Bengals</option>
    <option>Cleveland Browns</option>
    <option>Pittsburgh Steelers</option>
  </optgroup>
  <optgroup label="AFC SOUTH">
    <option>Houston Texans</option>
    <option>Indianapolis Colts</option>
    <option>Jacksonville Jaguars</option>
    <option>Tennessee Titans</option>
  </optgroup>
  <optgroup label="AFC WEST">
    <option>Denver Broncos</option>
    <option>Kansas City Chiefs</option>
    <option>Oakland Raiders</option>
    <option>San Diego Chargers</option>
  </optgroup>
</select>
Advertisement