Chosen JS - 将optgroup添加到所选项目

Question

当用户选择一个选项时，我想找到一种方法将optgroup标签输入到插入的搜索选择项中，格式为[optgroup]-[option]。

问题在于默认情况下没有明确的方法来实现这一点。您有什么建议可以实现这种行为吗？

先谢谢您。

这是默认行为

这就是我正在尝试做的事情

- It'sMe

---

如果我猜对了你的需求，这篇文章应该会对你有所帮助：https://dev59.com/k2kw5IYBdhLWcg3wKXX_ - Mohammed Sufian

这不完全是我想要做的，因为选择是一个Chosen JS。 - It'sMe

Answer 1

演示代码

您可以通过使用on()方法的第二个参数来实现，该参数包含一个带有属性selected的对象，如果存在value元素，则使用该元素，否则使用text元素（就像当前情况一样）：

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

然后，您可以获取最接近的optgroup并将其连接起来，然后更新选项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");

请看下面的示例，希望这可以帮到你。

$(".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>

- Zakaria Acharki

Answer 2

我不知道为什么没有人提出正确的做法。只需在初始化插件时将参数include_group_label_in_selected设置为true即可。您将会得到所选选项中的<OptGroupLabel> : <OptionText>。请注意保留html标签。

- mihaim

Answer 3

这段代码适用于多个选择器，并在取消选择时修复标签：

    $('select').chosen().filter('[multiple]').on('change', function(event, el) {
    var value = el.selected ? el.selected : el.deselected;
    var option = $(this).find("option[value=" + value + "]");
    var currentText = option.text();
    var newText;
    if (el.selected) {
      var optgroupLabel = option.closest('optgroup').attr('label');
      newText = optgroupLabel + ' - ' + currentText;
    } else {
      newText = currentText.split(' - ')[1];
    }
    option.text(newText).trigger("chosen:updated");
  });

- Diego Carrion

Answer 4

要在CakePHP中使用 optgroups ，您需要按照以下方式创建数组。 例如：

$counties = array(
  'Country Name 1' => array(
    'county_1_id' => 'County 1 Name',
    'county_2_id' => 'County 2 Name',
    'county_3_id' => 'County 3 Name',
  ),
  'Country Name 2' => array(
    'county_4_id' => 'County 4 Name',
    'county_5_id' => 'County 5 Name',
    'county_6_id' => 'County 6 Name',
  ),
);

echo $this->Form->input('country', array('type' => 'select', 'options' => $counties));

- Sandeep Sherpur