Документация / Виджеты /

Комбобокс

ZForms.Widget → ZForms.Widget.Text → ZForms.Widget.Text.Combo

Виджет для комбобокса создается на основе двух HTML-элементов: <input type="text" /> и <select />.

Определение виджета

Виджет определяется по дополнительному CSS-классу zf-combo — <input class="zf zf-combo" />.

Параметры инициализации

oOptions : {
	String sListId,
	String sPlaceHolder  : '',
	Boolean bFocusOnInit : false,
	String sListShowId   : null
	}

Где:

  • sListId — id select-элемента, который содержит список возможных значений.
  • sPlaceHolder — плэйсхолдер, который будет подставляться в поле в том случае, если оно пустое.
  • bFocusOnInit — параметр, позволяющий установить фокус на это поле при инициализации формы.
  • sListShowId — id элемента, который будет представлять кнопку для открывания всего списка значений.

Поддерживаемые зависимости

Пример

Код примера

<form class="zf" action=".">
	<dl class="zf-combo-box"> <!-- oClassElement -->
		<dt><label for="input-combo">Страна</label></dt>
		<dd>
			<input class="zf zf-combo" name="input-combo" id="input-combo" onclick="return { oOptions : { sListId : 'input-combo-list', sListShowId : 'input-combo-show'} }" />
			<input class="zf-button" type="button" id="input-combo-show" />
			<select class="zf-combolist" id="input-combo-list">
				<option value="1">Россия</option>
				<option value="2">Беларусь</option>
				<option value="3">Украина</option>
				<option value="4">Казахстан</option>
			</select>
		</dd>
	</dl>
</form>