Chosen JS - 将optgroup添加到所选项目
Chosen JS - Add the optgroup to the selected item
我想找到当用户select一个选项时,将optgroup标签输入到插入的搜索选择项中的方法。使用格式 [optgroup]-[option]
.
问题是默认情况下没有明确的方法来做到这一点。
有关如何实现此行为的任何建议?
提前致谢。
这是默认行为
这就是我想要做的
您可以通过接收 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>
此代码适用于多项选择,并且在取消选择时修复了标签:
$('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");
});
要使用 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));
我不知道为什么没有人建议这样做的正确方法。只需在初始化插件时将参数 include_group_label_in_selected
设置为 true
即可。你将获得
:
在选择的选项中。
我想找到当用户select一个选项时,将optgroup标签输入到插入的搜索选择项中的方法。使用格式 [optgroup]-[option]
.
问题是默认情况下没有明确的方法来做到这一点。 有关如何实现此行为的任何建议?
提前致谢。
这是默认行为
这就是我想要做的
您可以通过接收 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>
此代码适用于多项选择,并且在取消选择时修复了标签:
$('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");
});
要使用 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));
我不知道为什么没有人建议这样做的正确方法。只需在初始化插件时将参数 include_group_label_in_selected
设置为 true
即可。你将获得
在选择的选项中。