.on() select[multiple] всегда selected на динамических элементах
в общем у меня динамический select, поэтому обработчик вешаю через .on(), но вот в чем проблема при клике по любому элементу в обработчике он уже как selected
$(document).on('click','select[multiple] option',function(e){
e.preventDefault();
console.log(e.target.selected) // всегда true
});
соответственное если повесить так 'select[multiple] option:selected' то отрабатывает даже на не выделенном элементе попробовал повесить не на клик а на mousedown в хроме помогло, а в фф нет. |
Цитата:
|
ну так кликаю то по определенному "option"
|
ffx,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<script>
$(document).on('blur','select[multiple]',function(e){
alert($(this).val())
e.preventDefault();
});
</script>
</body>
</html>
|
потеря фокуса не канает, мне короче например надо чтобы при клике, если уже какойто option выбран, то он становился не выбранным
$(document).on('mousedown','select[multiple] option:selected',function(e){
$(this).prop('selected',false);
return false;
});
вот это то что надо, и работает в хроме) но охото все же кроссбраузерно на чекбоксы переходить тоже не охото p.s. поправил |
ffx,
Используй событие change.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<script type="text/javascript">
$(document).on('change', 'select[multiple]', function (e) {
alert($(this).val())
e.preventDefault();
});
</script>
</body>
</html>
|
непоможет, уже думал. например один option select, я по нему кликаю но события change не происходит потомучто он не изменился, а мне надо чтобы он deselect
|
ffx,
Вы могли бы обьяснить чего вы хотите добится? приходиться гадать - предполагаю вы хотите сбросить старые значения перед установкой новых
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select multiple="multiple" size="5" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<script>
$(document).on('focus','select[multiple]',function(e){
$(this).find('option:selected').attr({selected:!1})
e.preventDefault();
});
</script>
</body>
</html>
|
рони,
нет вы не правильно меня поняли, я хочу сделать так, если один раз кликнуть, элемент выделяется, еще раз по нему же - выделение снимается, если выделено 10 элементов и по 1 выделенному кликнуть, то он перестает быть выделенным, все остальные 9 все так же выделены то чего я хочу добиться, по дефолту работает через ctrl+click |
|
ffx,
имитация зажатой клавиши Ctrl на мультиселекте
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select multiple="multiple" size="5" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<script>
$(document).on('click','select[multiple]',function (e) {
var a = $(this).data('a') ? $(this).data('a') : [];
var b = $(this).val();
if (1 == b.length) {
for (var c = 0; c < a.length; c++) if (a[c] == b[0]) {
a.splice(c, 1);
$(this).val(a);
b.length = 0;
break
}
b.length && (a.push(b[0]), $(this).val(a))
}
$(this).data('a',$(this).val() || []) ;
e.preventDefault()
});
</script>
</body>
</html>
|
рони,
спасибо большое, но если выбирать несколько одним кликом, то все старые сбиваются. и что означает эта строка b.length [B]&&[/B] (a.push(b[0]), $(this).val(a)) не каждый элемент а именно целиком конструкция Hoshinokoe, плагин хорош, но желательно чтобы он выглядил как мультиселект а не как инпут |
Цитата:
|
ну так скажем click+drag то есть кликнули и потянули вниз
Цитата:
|
Цитата:
Цитата:
if (b.length ){a.push(b[0]); $(this).val(a)} ;
|
рони,
спасибо)чет я еще такого не встречал) |
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select multiple="multiple" size="5" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<script>
$(document).on('click','select[multiple] option',function(e){
var a = $(this);
a.toggleClass('active')
a.parent().children('option:not(.active)').removeAttr('selected');
a.parent().children('option.active').attr('selected','selected');
e.preventDefault();
});
</script>
</body>
</html>
|
Deff,
вот я почти решил как вы
$(document).on('click','select[multiple] option',function(e){
var option = $(this)
if (option.attr('select') == 'yes'){
option.prop('selected',false).attr('select','no');
}
else {
option.attr('select','yes');
}
return false;
});
но ие в упор не хочет воспринимать данный селектор 'select[multiple] option' и даже 'select option' а работает только на 'select' |
Deff, код не кросбраузерный
а рабочий код для хрома был у ТС с самого начала. |
ffx,
Deff, дело не в селекторе а в обработке клика на опцион |
Но имхо, при такой идее выделения - лучше ставить chekbox c label,
label позволяют скрыть сам chekbox и сделать тож самое цифрами (или как нравиться
<style>
.checkbox label{
display:block;
margin:6px 0;
}
</style>
<div class="checkbox">
<label>1
<input type="checkbox"/></label>
<label>2
<input type="checkbox"/></label>
<label>3
<input type="checkbox"/></label>
<label>4
<input type="checkbox"/></label>
</div>
|
Deff,
согласен, но в select можно сразу выделить несколько, как я раньше писал click+drag, чекбокс такого не даст |
Цитата:
При сотне тогда уж лучше выбирать инпут туpe=number c заданием начального и конечного значения |
Deff,
может быть и сотня) и все они названия а не просто 1 2 3 ) |
Цитата:
http://habrahabr.ru/post/167219/ |
Deff,
там про выпадающие списки, у меня они не выпадающие |
ffx,
Сейчас на jQuery Вы можете сделать свои "невыпадающие" - как угодно и удобно, клик по div идущим друг за другом в скроллируемом блоке, окрашивает данный div и ставит/ cнимает галки в скрытом checkbox Точно так же клик при выделении нескольких - ставит галки во всех нужных checkbox. select[multiple] так же не удобен как и не multiple |
Deff,
спасибо, думаю все таки в ближайшем будующем переведу на чекбоксы =) гребанный ие |
| Часовой пояс GMT +3, время: 06:57. |