Нужный <option> в <select>

17 апреля 2015

Пришлось решать следующую задачу: на странице редактирования свойств товара добавить дополнительную характе-
ристику, с возможностью выбора значения с помощью <select> и после выбора записать значение в базу к новому
свойствуву товара. Конструкция была самая простая :

<select form = "product-settings-form" name = "product_type">
        <option value = "0"> 0 - Без Акции</option>
        <option value = "1"> 1 - Акция 1</option>
        <option value = "2"> 2 - Акция 2</option>
        <option value = "3"> 3 - Акция 3</option>
        <option value = "4"> 4 - Акция 4</option>
</select>

И все бы ничего, но на этой странице уже присутствовали другие поля с редактированием других различных св-в товара,
и если администратор, войдя на страницу редактирования свойств товара, изменит какую-нибудь другую характеристику,
и нажмет сохранить - то в базу, помимо прочего, запишется значение моего селекта по умолчанию ( у меня это было 0),
которое перепишет предидущее установленное значение , если оно отлично от 0. Пришлось думать, как выставлять в
селекторе по умолчанию ту величину, которая записана в базе, для предотвращения данной коллизии .
На помощь пришел добрый javascript c Jquery.

Присваиваем нашим элементам идентификаторы - <select> обзываем id = "sel", а каждому <option> даем id из цифры,
склеенной со словом "opt" id = "0opt" ("1opt") и т.д . Подключаем библиотеку jquery-1.11.1.min.js ( в данном случае идет
речь о Shop-Script 3 c шаблонизатором Smarty), которая лежит у меня в каталоге js/jquery скриптов SC3 и за обращение к
данному каталогу отвечает константа Smarty - {$smarty.const.URL_JS} . И далее, либо добавляем в существующий, либо
пишем свой короткий скриптик, включающий обработку поступивших значений из базы. В данном случае используется
свойство product_type обьекта смарти product , которое было создано добавлением в таблицу товаров нового
поля - product_type и может принимать значения 0,1,2,3,4.
Логику получения значения поля из базы конструируйте сами, какую захотите -)). Важно то, что в переменную
optinon_select надо записать это значение. Затем с помощью свойства attr обьекта, который нам вернет
$("#"+option_select+"opt"), мы установим нужный нам option в select.

<script type="text/javascript" src="{$smarty.const.URL_JS}/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var option_select = {$product.product_type};/*записываем в переменную 0 либо 1,2,3,4 из базы*/
    $(document).ready(function(){literal}{{/literal}/* {literal} нужны тут из-за smarty*/
    $("#"+option_select+"opt").attr("selected","selected");
    {literal}}{/literal});
</script>
<select id = "sel" form = "product-settings-form" name = "product_type">
        <option id = "0opt" value = "0"> 0 - Без Акции</option>
        <option id = "1opt" value = "1"> 1 - Акция 1</option>
        <option id = "2opt" value = "2"> 2 - Акция 2</option>
        <option id = "3opt" value = "3"> 3 - Акция 3</option>
        <option id = "4opt" value = "4"> 4 - Акция 4</option>
</select>
Теги: javascript