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>
|
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>
|
Для множественного выбора используй multiple
<select id="event-list" multiple> ... </select> Для каких целей тебе скрытое поле? Чтобы получить выбранные значение обращайся на прямую
Alert($("#event-list").val())
|
Цитата:
|
Спасибо, за помощь :) Вечером попробую
Судя все должно работать! Еще раз спасибо :) |
Цитата:
вот и приходиться использовать скрытый input |
Всем, спасибо! все работает как надо :)
|
| Часовой пояс GMT +3, время: 20:44. |