Связать Combobox с jQuery Бегунком (Web Builder)


Combobox и jQuery Бегунок с двухсторонней связью. При изменении положения бегунка произойдёт выбор элемента в выпадающем списке и наоборот при выборе элемента в выпадающем списке ползунок переместится.
Пример двухсторонней связи Combobox(а) и jQuery Бегунка
В HTML-исходнике страницы между тегами <head> вставьте скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$( function() {
var select = $( "
#Combobox" );
var slider = $( "
#jQuerySlider" ).insertAfter( select ).slider({

   value: select[ 0 ].selectedIndex + 1,
   slide: function( event, ui ) {
    select[ 0 ].selectedIndex = ui.value - 1;
  }
});

$( "
#Combobox" ).on( "change", function() {
slider.slider( "value", this.selectedIndex + 1 );
  });
} );
</script>
В 3-й, 12-й строке скрипта: Combobox - это id выпадающего списка.
В 4-й строке скрипта: jQuerySlider - это id jQuery Бегунка.
Для тех кто не является пользователем программы WYSIWYG Web Builder в самом верху скрипта (разумеется сразу после <script>) добавьте:
$(document).ready(function() {
   var jQuerySliderOptions =
   {
      orientation:
'horizontal',
      animate:
true,
      range:
'min',
      min:
1,
      max:
5
   };
   $("
#jQuerySlider").slider(jQuerySliderOptions);
});
Свойства бегунка -- Вкладка -- Общее:

Исходное: 2
Диапазон: min
Минимальное: 1
Максимальное: 5
Скачать исходник .wbs (версия 12.3.0)