motivação:
Agora vamos fazer um pequeno exemplo de aplicação de XML no IE: resolvendo o problema de ligação de menus suspensos duplos. Talvez o exemplo mais comum seja selecionar uma província e depois alterar as opções de cidade, então vamos tentar usar XML para completá-lo.
Algumas das funções que apresentei anteriormente foram implementadas diretamente usando arquivos XML+XSL Você pode não estar muito familiarizado com seu uso, então usarei HMTL+XML desta vez, esperando dar a todos uma compreensão mais clara--" XML pode ser assim. simples!" :)
Material:
Existem 2 arquivos vinculados ao menu de seleção de volume XML: Citys.xml e CitySelect.htm
As funções são:
Depois de selecionar uma província, a cidade correspondente pode ser exibida automaticamente, o que é conveniente para os usuários, melhora efetivamente a interação dos dados e torna sua página mais colorida.
Efeito:
Navegue aqui
Código:
Cidades.xml
<?xml version="1.0" encoding="gb2312"?>
<China>
<Estado id="1" nome="Jiangxi">
<Cidade>Jiujiang</Cidade>
<Cidade>Nanchang</Cidade>
<Cidade>Lushan</Cidade>
<Cidade>Jingdezhen</Cidade>
</Estado>
<Estado id="2" name="Pequim">
<Cidade>Oeste de Pequim</Cidade>
<Cidade>Juyongguan</Cidade>
<Cidade>Jardim Tsinghua</City>
<Cidade>Zhoukoudian</Cidade>
</Estado>
<Estado id="3" nome="Fujian">
<Cidade>Fuzhou</Cidade>
<Cidade>Xiamen</Cidade>
<Cidade>Zhangzhou</Cidade>
</Estado>
<Estado id="4" nome="Gansu">
<Cidade>Lanzhou</Cidade>
<Cidade>Lomen</Cidade>
<Cidade>Jiayuguan</Cidade>
</Estado>
<Estado id="5" nome="Guangdong">
<Cidade>Guangzhou</Cidade>
<Cidade>Shenzhen</Cidade>
<Cidade>Dongguan</Cidade>
<Cidade>Shipai</Cidade>
</Estado>
<Estado id="6" nome="Anhui">
<Cidade>Hefei</Cidade>
<Cidade>Huangshan</Cidade>
<Cidade>Monte Kowloon</City>
<Cidade>Ma'anshan</Cidade>
</Estado>
</China>
Função personalizada
CitySelect.htm
: ChooseState
(Leia o nome da província nos dados XML e adicione-o à lista suspensa do SelState)
funçãoChooseState()
{
fonte var;
var sourceName = "Cidades.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //Cria uma instância do analisador MSXML
fonte.async = falso;
source.load(sourceName); //Carrega documento XML
root = source.documentElement; //Definir o elemento do documento como o elemento do nó raiz
sortField=root.selectNodes(" //@name "); //Pesquise todos os nós cujos atributos contenham nome
for(var i=0;i<sortField.length;++i) //Adiciona nomes de províncias à lista suspensa
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelState.options.add(oOption);
}
EscolhaCidade();
}
Função personalizada: ChooseCity
(Leia o nome da cidade correspondente nos dados XML com base no nome da província atualmente selecionada e adicione-o à lista suspensa SelCity)
funçãoEscolherCidade()
{
x=form1.SelState.selectedIndex; //Lê as opções atuais da caixa suspensa da província
y=form1.SelState.options[x].valor;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //Pesquise todos os nós da cidade sob o nó State cujo valor do atributo name seja igual ao parâmetro y
for(var i=form1.SelCity.options.length-1;i>=0;--i) //Desfaz o item original da lista
{
formulário1.SelCity.options.remove(i)
}
for(var i=0;i<sortField.length;++i) //Adiciona o nome da cidade à lista suspensa
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}
Código fonte do formulário
<BODY onLoad="ChooseState()">
<FORM action="" method="post" id="form1" name="form1">
<SELECT name="SelState" id="SelState" onchange="ChooseCity()" >
</SELECIONAR>
<SELECT nome="SelCity" id="SelCity" >
</SELECIONAR>
</FORM>
</BODY>
Pós-escrito:
Quando comecei a aprender XML, tive a mesma confusão que todo mundo - "Aprendi XML, mas como devo usá-lo? Essa pergunta me atrapalha há muito, muito tempo...
Porque e-commerce?
"e desenvolvimento de software são minha especialidade, achei que seria melhor começar com o que estou mais familiarizado. Então implementei algumas das funções mais utilizadas na construção de sites em XML. Você também pode fazer isso!