Javascript-форум - Limit multiple selects для image-picker

Добрый день!
Помогите пожалуйста реализовать 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>