Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   .on() select[multiple] всегда selected на динамических элементах (https://javascript.ru/forum/jquery/35289-select%5Bmultiple%5D-vsegda-selected-na-dinamicheskikh-ehlementakh.html)

рони 06.02.2013 17:56

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>

ffx 07.02.2013 10:18

рони,
спасибо большое, но если выбирать несколько одним кликом, то все старые сбиваются.

и что означает эта строка
b.length [B]&&[/B] (a.push(b[0]), $(this).val(a))

не каждый элемент а именно целиком конструкция

Hoshinokoe,
плагин хорош, но желательно чтобы он выглядил как мультиселект а не как инпут

рони 07.02.2013 10:28

Цитата:

Сообщение от ffx
если выбирать несколько одним кликом

это как?

ffx 07.02.2013 10:31

ну так скажем click+drag то есть кликнули и потянули вниз

Цитата:

и что означает эта строка
b.length [B]&&[/B] (a.push(b[0]), $(this).val(a))

не каждый элемент а именно целиком конструкция

рони 07.02.2013 10:50

Цитата:

Сообщение от ffx
элемент выделяется, еще раз по нему же - выделение снимается, если выделено 10 элементов и по 1 выделенному кликнуть, то он перестает быть выделенным, все остальные 9 все так же выделены

это выполнено
Цитата:

Сообщение от ffx
b.length && (a.push(b[0]), $(this).val(a))

иная форма записи того же самого
if (b.length ){a.push(b[0]); $(this).val(a)} ;

ffx 07.02.2013 10:54

рони,
спасибо)чет я еще такого не встречал)

Deff 07.02.2013 11:34

<!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>

ffx 07.02.2013 11:42

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'

рони 07.02.2013 11:42

Deff, код не кросбраузерный
а рабочий код для хрома был у ТС с самого начала.

рони 07.02.2013 11:45

ffx,
Deff,
дело не в селекторе а в обработке клика на опцион


Часовой пояс GMT +3, время: 09:04.