Форум

vladislav.blinov · #1 (**permalink**) 13.11.2013, 10:19

Всем привет! подскажите пожалуйста пример скрипта, есть мультиселект -

<select id="e_skills" class="skill_changer" multiple="multiple">
<optgroup id="44" label="Группа1">
<option value="137,44">mission impossible</option>
<option value="138,44">ahtung</option>
<option value="139,44">protocol 12</option>
</optgroup>
<optgroup id="67" label="Группа2">
<option value="121,67">post</option>
<option value="128,67">query</option>
<option value="130,67">good</option>
<option value="131,67">sss</option>
</optgroup>
</select>

нужно что бы щёлкнув по названию группы выбирались все пункты этой группы.

ksa · #2 (**permalink**) 13.11.2013, 11:07

Сообщение от vladislav.blinov

что бы щёлкнув по названию группы выбирались все пункты этой группы

На именно название optgroup нет такого события...

Делай свой селект.

vladislav.blinov · #3 (**permalink**) 13.11.2013, 11:23

Цитата:

Делай свой селект.

я бы с удовольствием, но нужен именно bootstrap multiselect. И что события на optgroup нету знаю, но нужно создать, вот я и дербаню его уже второй день.

vladislav.blinov · #4 (**permalink**) 13.11.2013, 13:33

я тут немного разобрался, поразмыслил и получилось следующее -

groupAll: function() {
            this.$element.find('option').prop('selected', true).attr('selected', 'selected');
            this.render();
        },

find находит все - ('option') и отчекивает следовательно тоже все. А вот как задать поиск ('option') в определённом optgroup не могу понять...

ksa · #5 (**permalink**) 13.11.2013, 13:44

Сообщение от vladislav.blinov

А вот как задать поиск ('option') в определённом optgroup не могу понять...

"Усилить" селектор!

$('#44 > option');
$('optgroup[label="Группа2"] > option');

vladislav.blinov · #6 (**permalink**) 14.11.2013, 11:50

Спасибо за совет

, в итоге получилось:

$('#44').find('option').prop('selected', true).attr('selected', 'selected');

а как можно определить что все option в группе отчекнуты, чтобы при повторном нажатии выделение снималось?

ksa · #7 (**permalink**) 14.11.2013, 13:07

Сообщение от vladislav.blinov

а как можно определить что все option в группе отчекнуты

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function (){
	$('optgroup').click(function (){
		if ($(this).children('option:not("[selected]")').length) {
			$(this).children('option').attr('selected',true);
		} else {
			$(this).children('option').attrRemove('selected');
		};
	});
});
</script>
</head>
<body>
<select id="e_skills" class="skill_changer" multiple="multiple">
	<optgroup id="44" label="Группа1">
		<option value="137,44">mission impossible</option>
		<option value="138,44">ahtung</option>
		<option value="139,44">protocol 12</option>
	</optgroup>
	<optgroup id="67" label="Группа2">
		<option value="121,67">post</option>
		<option value="128,67">query</option>
		<option value="130,67">good</option>
		<option value="131,67">sss</option>
	</optgroup>
</select>
</body>
</html>

vladislav.blinov · #8 (**permalink**) 15.11.2013, 08:36

Заработало!

плохо только что сам до всего не додумался но думаю придёт всё с опытом. ksa спасибо за советы

кому интересно вот окончательный вариант моего скриптика

var selectActive = $("#id").find('option:not("[selected]")').length;
    if(selectActive == 0){
        $("#id").find('option').prop('selected', false).removeAttr('selected');
        $("#e_skills").selectpicker('render');
    }else{
        $("#id").find('option').prop('selected', true).attr('selected', 'selected');
        $("#e_skills").selectpicker('render');
    }

Форум

Справочник

Discord чат

Курсы javascript