Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2016, 07:35
Новичок на форуме
Отправить личное сообщение для ramon149 Посмотреть профиль Найти все сообщения от ramon149
 
Регистрация: 22.07.2016
Сообщений: 4

Select2(select option) получение значения при выборе в скрытый input value=""
Добрый день!
Прошу помощь с Select2 v4 ссылка на него https://select2.github.io/options.html
С помощью него стилизовал <select>.
<input type="hidden" name="tagger-1" id="event" value="">
<select id="#event-list" multiple="multiple">		
	<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>
</select>

Подключил Select2. Как сделать так чтобы при выборе в select2, выбранное значение подставлялось в value="" скрытого input через ",", а при удаление удалялось из input. Из того что прочитал в документации надо использовать два события: select2:select и select2:unselect и заворачивать их в (How can I attach listeners for these events?):
$('select').on('select2:select', function (evt) {
  // Do something
});

Что получилось у меня. Но в таком случае вставляется только одно значение, те если сначало было выбрано value="Событие1" при выборе другого "Событие2" затирается первое и получается value="Событие2"! А требуется: value="Событие1, Событие2, Событие3"
А при удалении удаляется значение вместе с value="".
<script type="text/javascript">
$(function(){
$("#event-list").select2({
	placeholder: 'Выберите событие',
})
//Добавление в value=""
.on('select2:select', function (evt) {
	$('#event').attr('value', this.value);
})
//Удаление из  value=""
.on('select2:unselect', function (evt) {
	  $('#event').removeAttr('value', this.value);
});
});
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2016, 08:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

ramon149,
неправильные у вас id и вместо attr нужен val

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
#event-list{
  width: 200px;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

</head>

<body>
<input  name="tagger-1" id="event" value="">
<select id="event-list" multiple="multiple">
  <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>
</select>
<script type="text/javascript">
$(function(){
$("#event-list").select2({
  placeholder: 'Выберите событие'
})
//Добавление и удаление в value=""
.on('select2:select select2:unselect', function (evt) {
  $('#event').val($(this).val());
})

});
</script>


</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2016, 08:43
Новичок на форуме
Отправить личное сообщение для osi322 Посмотреть профиль Найти все сообщения от osi322
 
Регистрация: 22.07.2016
Сообщений: 3

Для множественного выбора используй multiple
<select id="event-list" multiple>		
	...
</select>

Для каких целей тебе скрытое поле? Чтобы получить выбранные значение обращайся на прямую
Alert($("#event-list").val())

Последний раз редактировалось osi322, 22.07.2016 в 08:45.
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2016, 08:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от osi322
Для множественного выбора используй multiple
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2016, 08:50
Новичок на форуме
Отправить личное сообщение для ramon149 Посмотреть профиль Найти все сообщения от ramon149
 
Регистрация: 22.07.2016
Сообщений: 4

Спасибо, за помощь Вечером попробую
Судя все должно работать! Еще раз спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 22.07.2016, 08:53
Новичок на форуме
Отправить личное сообщение для ramon149 Посмотреть профиль Найти все сообщения от ramon149
 
Регистрация: 22.07.2016
Сообщений: 4

Сообщение от osi322 Посмотреть сообщение
Для каких целей тебе скрытое поле? Чтобы получить выбранные значение обращайся на прямую
На сайте компонент отвечающий за теги понимает при вводе только: <input value="Событие1,Событие2">
вот и приходиться использовать скрытый input
Ответить с цитированием
  #7 (permalink)  
Старый 22.07.2016, 09:56
Новичок на форуме
Отправить личное сообщение для ramon149 Посмотреть профиль Найти все сообщения от ramon149
 
Регистрация: 22.07.2016
Сообщений: 4

Всем, спасибо! все работает как надо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение значения input vladimircape jQuery 3 09.05.2015 21:54
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
выбор значения select -> скрытый input allie jQuery 2 16.08.2011 12:28
Получение значения соседнего элемента Max Tretyakov Events/DOM/Window 2 27.06.2011 22:01
При выборе определенного option => событие FRIE jQuery 2 05.03.2010 11:40