Добрый день!
Помогите пожалуйста реализовать ajax добавление атрибута data-limit для image-picker
Пример работы image-picker
http://rvera.github.io/image-picker/
Что я пытаюсь реализовать : чтобы при помощи выбора из выпадающего списка 1,2,3,4,5 можно было увеличить или уменьшить значение data-limit или limit (количество выбранных изображений). Я добился того, чтобы происходило уменьшение или увеличение значения атрибута limit, но все работает только с перезагрузкой страницы.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- CSS Файлы которые нужны для работы image-picker -->
<link href="image-picker/image-picker.css" rel="stylesheet">
<!-- Конец CSS файлов -->
<!-- JS Файлы которые нужны для работы image-picker -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="image-picker/image-picker.js"></script>
<!-- Конец JS файлов -->
</head>
<body>
<!-- multiple_subtype -->
<div class="row" style=" height:80px;">
<h5>Вы желаете отметить несколько подтипов?</h5>
<div class="col-sm-6" style="float:left;">
<div id="representative_office" class="radio-block">
<div class="radio_check">
<label>
<input type="radio" value="yes_multiple" id="yes_multiple" name="representative_office" >
<span>Да</span>
</label>
</div>
<div class="radio_check">
<label>
<input type="radio" checked="" value="no_multiple" id="no_multiple" name="representative_office">
<span>Нет</span>
</label>
</div>
</div>
</div>
<div class="col-sm-6" style="float:right;">
<div class="wizard-input-section hide" id="hide2">
<select data-placeholder="Monitor nodes" style="width:350px;" id="image_picker_count" class="chzn-select">
<option selected="selected"value="0" >Choose</option>
<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>
</select>
</div>
</div>
</div>
<!-- /multiple_subtype -->
<div class="wizard-input-section">
<h5>Property subtype</h5>
<div class="form-group">
<select class="image-picker show-html" id="image-picker" multiple="true" style="width:369px; margin-bottom: 20px;">
<option data-img-src="image-picker/images/01.png" value="2"> Page 2 </option>
<option data-img-src="image-picker/images/01.png" value="3"> Page 3 </option>
<option data-img-src="image-picker/images/01.png" value="4"> Page 4 </option>
<option data-img-src="image-picker/images/01.png" value="5"> Page 5 </option>
<option data-img-src="image-picker/images/01.png" value="6"> Page 6 </option>
<option data-img-src="image-picker/images/01.png" value="7"> Page 7 </option>
<option data-img-src="image-picker/images/01.png" value="8"> Page 8 </option>
<option data-img-src="image-picker/images/01.png" value="9"> Page 9 </option>
<option data-img-src="image-picker/images/01.png" value="10"> Page 10 </option>
<option data-img-src="image-picker/images/01.png" value="11"> Page 11 </option>
<option data-img-src="image-picker/images/01.png" value="12"> Page 12 </option>
</select>
</div>
</div>
<script type="text/javascript" >
$(document).ready(function () {
var name_element = document.getElementById('image_picker_count');
var [B]count_id[/B] = name_element.value;
if ([B]count_id[/B] == '0') {
$('#image-picker').attr('multiple', false);
}
else
{
$('#image-picker').attr('multiple', true);
jQuery("select.image-picker").imagepicker({
hide_select: true,
limit_reached: function(){alert('We are full!')},
limit: [B]count_id[/B],
});
}
});
</script>
</body>
</html>
