Типичный способ, которым я выполняю что-то подобное, - это на самом деле хранить 3 разных поля в БД для каждого из различных типов значений. Затем я создаю что-то вроде следующего HTML:
<!-- Input type selector -->
<div class="cell variable-selector">
<select><option ...</select>
</div>
<!-- varied input -->
<div class="cell variable show-text">
<div class="text"><input type="textbox"></div>
<div class="date-picker"><input type="textbox" class="datepicker"></div>
<div class="drop-down-bool"><select><option ...</select>
</div>
Тогда у меня есть CSS, который скрывает или показывает правильный элемент ввода в зависимости от того, какой класс ячейка имеет:
div.variable div { display:none }
div.show-text div.text { display: inline }
div.show-date-picker div.date-picker {display: inline }
div.show-drop-down-bool div.drop-down-bool {display: inline}
наконец, вы можете настроить некоторый javascript так, чтобы при изменении селектора переменных вы меняли класс ячейки переменной. Какой jquery можно сделать так:
$(document).ready(function() {
var variableSelector = $("div.variable-selector > select");
variableSelector.change(function() {
var type = $(this).text();
var class = "cell variable show-" + type;
var variableCell = $(this).parent().parent().find("variable");
variableCell.attr("class", class);
})
});
В качестве быстрого предупреждения я написал приведенный выше код на лету в окне редактора переполнения стека, так что может быть пара синтаксических ошибок или небольшая ошибка где-то, но основная идея должна работать. Надеюсь, поможет.
--Adam