Недавно несколько страниц должны загрузить некоторые раскрывающиеся в списке поле для выбора пользователей. Оказывается, что они загружаются на стороне сервера и должны использоваться. Наконец, из -за соображений бизнес -логики, некоторые функции DropdownList должны быть введены в реализацию клиента. Теперь функции раскрывающегося списка кажутся намного лучше, чем при их размещении на стороне сервера.
Конкретные методы:
Поместите элемент управления DropdownList на страницу и добавьте элемент для анализа кода HTML, который он генерирует. Таким образом, при использовании JS для динамического управления код испытаний будет очень ясно следующим образом:
<ASP: DropDownList ID = "DropDownList1" RUNAT = "Сервер"> <ASP: LISTITEM> 1 </ASP: LISTITEM> </asp: DropDownList>
Просмотр в браузере и проанализируйте HTML: ниже приведен HTML -код, сгенерированный управлением DropdownList. Нет ничего похожего на обычный выбор
Есть разница. Затем вы можете динамически заполнить, удалять, выбирать и другие элементы управления через JS.
<select name = "dropdownlist1" id = "dropdownlist1"> <option value = "1"> 1 </option> </select>
Вы можете удалить <ASP: ListItem> 1 </asp: listItem>, и теперь добавить два элемента управления кнопкой HTML для реализации добавления параметров и удаления всех параметров соответственно. Исходный код кнопки заключается в следующем:
<input id = "button1" type = "button" value = "add Option" onclick = "AddoPtion ()" /> <input ID = "button2" type = "кнопка" value = "Delete All Option" OnClick = "deloPtion ()" />
Добавление и удаление функций следующие:
function addoption () {var ddlobj = document.getElementbyId ("dropdownlist1"); // Получить объект if (ddlobj.length> 0) deloption (); // Сначала удалить все это, а затем добавить var opttext = new Array («основатель», «Китай», «beijing»); ooption = null; for (var i = 0; i <opttext.length; i ++) {ooption = new Option (opttext [i], optvalue [i]); ddlobj.options.add (ooption);}} function deloption () {var ddlobj = document.getelementb i = ddlobj.length-1; i> = 0; i-) {ddlobj.remove (i); // Firefox не поддерживает ddlcurselectkey.options.remove (), оба поддержки IE}}Просмотр в браузере, вы можете легко создать выбранные раскрывающиеся параметры, которые являются более эффективными, чем серверы, поскольку они созданы клиентами
Код, который работает на стороне. Но в настоящее время, если вы хотите использовать DropdownList1.selectedValue, чтобы выбрать опцию пользователем, то у вас будет
Получил ошибку. Это связано с тем, что Dropdownlist добавляется JS, поэтому его элементы не принадлежат ViewState и не поддерживаются,
То есть мы не можем справиться с этим на стороне сервера. Чтобы решить эту проблему, есть два способа использования: 1. Сохранить скрытый контроль
Метод опции пользователя; 2. Метод запроса. Форма. (См. MSDN Taste Ajax)
1. Мы добавляем скрытый элемент управления на страницу и используем его для сохранения информации об изменениях в параметрах DropdownList, так что чувство выбора пользователя
После того, как у нас есть интересующая информация, мы можем получить информацию на сервере и обработать ее, чтобы разумно реализовать разделение труда между клиентами и услугами.
Добавьте событие OnChange в управление DropdownList, и его HTML -код заключается в следующем:
<ASP: DropDownList ID = "DropDownList1" runat = "server" onChange = "resvitem ()"> </asp: dropdownlist>
Событие OnChange заключается в следующем. Это событие в основном сохраняет значение, выбранное пользователем:
function resvitem () {var objddl = document.getElementbyid ("dropdownlist1"); document.getElementByid ("hiddenfield1").После этого мы используем управление кнопкой ASP: для проверки результатов:
Protected void button1_click (отправитель объекта, Eventargs e) {response.write (hiddenfield1.value);}На данный момент вся работа была завершена, но все еще есть проблема. Событие изменения DropdownList выбирается только при изменении пользователя.
Это будет вызвано только тогда, когда элемент. Следовательно, когда пользователь подчиняется параметрам по умолчанию, нулевое значение получается. Следовательно, при опции заполнения мы можем
Скрытая инициализация. Добавьте строку кода в событие AddoPtion следующим образом:
function addoption () {var ddlobj = document.getElementbyId ("dropdownlist1"); // Получить объект if (ddlobj.length> 0) deloption (); // Сначала удалить все это, а затем добавить var opttext = new Array («основатель», «Китай», «beijing»); ooption = null; for (var i = 0; i <opttext.length; i ++) {ooption = new Option (opttext [i], optvalue [i]); ddlobj.options.add (ooption);} document.getelementbyid ("hiddenfield1").Тем не менее, вышеуказанная красная часть не успешна в Add Under TT Browser, и я еще не пробовал другой просмотр. Вот еще один способ написания:
function getDeptList () {var ddlcityType = document.getElementById ("ddlCityType"); var ddlposition = document.getElementById ("ddlPosition"); var v = ddlcityType.options [ddlcityType.selectedIndex];//alert (v.value); Deptlist = guest_userregister.getDeptList (v.value) .value; var deptList = new Array (); deptList = deptList.split (';'); for (var i = 0; i <deptList.length; i ++) {if (deptList [i]! document.createElement ("опция"); opt.innerhtml = dept [1]; opt.value = dept [0]; ddlposition.insertbefore (opt, ddlposition.firstchild);}}} функция deloption () {var ddluserschool = document.getelementbyid ("ddluserschool"); while (num> 0) {for (var j = 0; j <num; j ++) {ddluserschool.remove (j);} num = ddluserschool.length;}} function getSchoollist () {deloption (); var ddlprovince = document.getElementbyid ("ddlprovince"; document.getElementbyId ("ddluserschool"); var v = ddlprovince.options [ddlprovince.selectedIndex]; var deptlist = guest_userregister.getschoollist (v.value) .value; var deptList = new Array (); deptList = deptList. i = 0; i <deptlist.length; i ++) {if (deptList [i]! = "") {var dept = deptList [i] .split (','); var opt = document.createElement ("option"); opt.innerhtml = dept [1]; opt.value = dept [0]; ddluserschool.insertbefore (opt, ddluserschool.firstchild);}}}}