Recentemente, várias páginas precisam carregar algumas caixas de listagem suspensas para os usuários escolherem. Acontece que eles estão carregando no lado do servidor e devem ser usados. Finalmente, devido a considerações de lógica de negócios, algumas das funções da lista suspensa precisam ser colocadas na implementação do cliente. Agora, as funções da lista suspensa parecem muito melhores do que quando as colocam no lado do servidor.
Métodos específicos:
Coloque um controle da lista suspensa na página e adicione um item para analisar o código HTML que ele gera. Dessa forma, ao usar o JS para controle dinâmico, o código de teste ficará muito claro da seguinte forma:
<ASP: DOLTODDOWNLIST ID = "DOWNDOWNLIST1" RUNAT = "Server"> <SP: ListItem> 1 </asp: listItem> </asp: DropDownList>
Visualização no navegador e analise o HTML: o seguinte é o código HTML gerado pelo controle do listado suspenso. Nada como seleção comum
Há uma diferença. Em seguida, você pode preencher, excluir, selecionar e outros controles dinamicamente através do JS.
<select name = "suspensollist1" id = "suspensoLlist1"> <opção value = "1"> 1 </pption> </leclect>
Você pode excluir <asp: listItem> 1 </asp: listitem> e agora adicione dois controles de botão HTML para implementar a adição de opções e excluir todas as opções, respectivamente. O código -fonte do botão é o seguinte:
<input id = "button1" type = "button" value = "add option" onclick = "addOption ()" /> <input id = "button2" type = "button" value = "exclua todas as opções" onclick = "delotion ()" />
Adicionar e excluir funções são as seguintes:
function addOption () {var ddlobj = document.getElementById ("suspensoLlist1"); // obtenha objeto if (ddlobj.length> 0) Deloption (); // exclua todo OOption = null; para (var i = 0; i <optText.Length; i ++) {ooption = nova opção (optText [i], optValue [i]); ddlobj.Options.add (oOption);}} function () {var ddlobj =.ElementsBy); i = ddlobj.length-1; i> = 0; i-) {ddlobj.remove (i); // firefox não suporta ddlcurselectKey.options.remove (), ambos o suporte}}}Veja em um navegador, você pode criar facilmente opções suspensas, que são mais eficientes que os servidores, pois são gerados pelo cliente
código que funciona do lado. Mas neste momento, se você quiser usar o suspenso List1.SelectedValue para obter a opção selecionada pelo usuário, então você terá
Recebi um erro. Isso ocorre porque a lista suspensa é adicionada dinamicamente por JS; portanto, seus itens não pertencem ao ViewState e não são mantidos,
Ou seja, não podemos lidar com isso no lado do servidor. Para resolver esse problema, há duas maneiras de usar: 1. Salvar controle oculto
Método da opção do usuário; 2. Método de request.form. (Veja MSDN Taste Ajax)
1. Adicionamos um controle oculto à página e o usamos para salvar as informações sobre as alterações nas opções da lista suspensa, para que o senso de escolha do usuário
Depois de termos informações de interesse, podemos obter as informações sobre o servidor e processá -las para realizar razoavelmente a divisão do trabalho entre clientes e serviços.
Adicione um evento de onchange ao controle da lista suspensa e seu código HTML é o seguinte:
er
O evento OnChange é o seguinte. Este evento salva principalmente o valor selecionado pelo usuário:
function resvitem () {var objddl = document.getElementById ("suspensoLlist1"); document.getElementById ("hiddenfield1").Depois disso, usamos um controle de botão ASP: para testar os resultados:
Void protegido Button1_Click (Remetente de Objeto, EventArgs E) {Response.Write (Hiddenfield1.Value);}Neste ponto, todo o trabalho foi concluído, mas ainda há um problema. O evento de mudança da lista suspensa é selecionado apenas quando o usuário altera o suspensão.
Ele só será acionado quando o item for. Portanto, quando o usuário envia com as opções padrão, o valor nulo é obtido. Portanto, ao preencher a opção, podemos
Inicialização oculta. Adicione uma linha de código ao evento Addoption da seguinte forma:
function addOption () {var ddlobj = document.getElementById ("suspensoLlist1"); // obtenha objeto if (ddlobj.length> 0) Deloption (); // exclua todo oOption = null; para (var i = 0; i <optText.Length; i ++) {ooption = nova opção (optText [i], optValue [i]); ddlobj.Options.add (oOption);} document.getElementById ("Hiddenfield1").No entanto, a parte vermelha acima não é bem -sucedida add, no navegador TT, e ainda não tentei outra navegação. Aqui está outra maneira de escrever:
function getDeptList () {var ddlcityType = document.getElementById ("ddlcityType"); var ddlPosition = document.getElementById ("ddlPosition"); var v = ddlcityType.Options [ddlcityType.selectedEx]; Deptlist = hetter_userRregister.getDeptList (v.Value) .Value; var deptList = new Array (); deptlist = deptlist.split (';'); para (var i = 0; i <deptList.length; i++) {if (DeptList [i]! departamento = deptlist [i] .split (','); var opt = document.createElement ("option"); opt.innerhtml = dept [1]; opt.Value = dept [0]; ddlPosition.InsertBe antes (opt, ddlPosition.firstChild);}}} function DelOption () {var ddlUserschool = documentElementByIdLiDL (DDLUSCHOLSCHOL); while (num> 0) {for (var j = 0; j <num; j ++) {ddLuserSchool.Remove (j);} num = ddLUserschool.length;}} função getSchoollist () {Deloption (); var ddlProvince = document.LegusByDId () {Deloption (); var ddlProvince = document.LegusById () {DelOption (); var ddlProvince = document.LegusById () {DelOption (); var ddlProvince = document.LegurbyId () {ddlProv (); document.getElementById ("ddLuserschool"); var v = ddlprovince.options [ddlprovince.SelectedIndex]; var deptlist = hetter_userregister.getschoollist (v.value) .value; var dept = new Array;); i = 0; i <DeptList.Length; i ++) {if (deptlist [i]! = "") {var dept = deptlist [i] .split (','); var opt = document.createElement ("opção"); opt.innerhtml = departamento [1]; opt.value = dept [0]; ddLuserSchool.insertBefore (opt, ddLuserschool.firstchild);}}}}