Uma compreensão básica:
var e = document.getElementById("selectId");
e.opções= new Option("texto","valor");
//Cria um objeto de opção, ou seja, cria um ou mais <option value="value">texto</option> na tag <select>
//options é um array, que pode armazenar múltiplas tags como <option value="value">text</option>
1: Propriedades da matriz de opções []:
atributo de comprimento --------- atributo de comprimento
Atributo selectIndex -------- O valor do índice do texto na caixa atualmente selecionada. Este valor do índice é alocado automaticamente pela memória (0,1,2,3...) correspondente ao (primeiro valor do texto. , segundo valor de texto, terceiro valor de texto, quarto valor de texto...)
2: Atributos de uma única opção (---obj.options[obj.selecedIndex] é uma tag <option> especificada, que é um ---)
atributo de texto --------- retornar/especificar texto
atributo de valor------Retornar/especificar valor, consistente com <options value="...">.
atributo de índice ------- retorna o subscrito,
atributo selecionado ------- Retorna/especifica se o objeto está selecionado. Ao especificar verdadeiro ou falso, o item selecionado pode ser alterado dinamicamente.
Atributo defaultSelected-----Retorna se o objeto está selecionado por padrão. verdadeiro/falso.
3: método de opção
Adicione uma tag <option>-----obj.options.add(new("text","value"));<add>
Exclua uma tag <option>-----obj.options.remove(obj.selectedIndex)<delete>
Obtenha o texto de uma tag <option>-----obj.options[obj.selectedIndex].text<check>
Modifique o valor de uma tag <option>-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
Remova todas as tags <option>-----obj.options.length = 0
Obtenha o valor de uma tag <option>-----obj.options[obj.selectedIndex].value
Perceber:
a: O método acima é escrito como este tipo de método obj.options.function() em vez de obj.funciton, porque para considerar a compatibilidade no IE e FF, por exemplo, obj.add() só é válido no IE .
b: A opção em obj.option não precisa estar em maiúscula, e a opção em nova Option precisa estar em maiúscula.
Duas aplicações
Copie o código do código da seguinte forma:
<html>
<cabeça>
<linguagem script="javascript">
número da função(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//Alteração no valor do atualmente selecionado
//obj.options.add(new Option("My food","4"));Adicionar outra opção
//alert(obj.selectedIndex);//exibe o número de série, a opção é definida por si só
//obj.options[obj.selectedIndex].text = "Minha comida";
//obj.remove(obj.selectedIndex);
}
</script>
</head>
<corpo>
<select id="mySelect">
<option>Minha bolsa</option>
<option>Meu caderno</option>
<option>Meu óleo</option>
<option>Meu fardo</option>
</selecionar>
<input type="button" name="button" value="Ver resultados" onclick="number();">
</body>
</html>
Com base nessas coisas, implementei uma pequena função usando JQEURY AJAX+JSON da seguinte forma:
Código JS: (apenas o código relacionado ao SELECT é obtido)
Copie o código do código da seguinte forma:
/**
* @description Lista suspensa de vinculação de componentes (implementada usando AJAX e JSON do JQUERY)
* @prarm selectId ID da lista suspensa
* @prarm method O nome do método a ser chamado
* @prarm temp O ID do software é armazenado aqui
* @prarm url O endereço para onde ir
*/
função linkAgeJson(selectId,método,temp,url){
$j.ajax({
type: "get",//Use o método get para acessar o plano de fundo
dataType: "json",//Retorna dados no formato json
url: url, //Endereço backend a ser acessado
data: "method=" + method+"&temp="+temp,//Dados a serem enviados
sucesso: function(msg){//msg são os dados retornados, a vinculação de dados é feita aqui
var dados = msg.listas;
coverJsonToHtml(selectId,dados);
}
});
}
/**
* @description Converte dados JSON em formato de dados HTML
* @prarm selectId ID da lista suspensa
* @prarm nodeArray retornou array JSON
*
*/
função coverJsonToHtml(selectId,nodeArray){
//obter seleção
var tempSelect=$j("#"+selectId);
//limpa o valor selecionado
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i<nodeArray.length;i++){
//cria opção de seleção
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//coloca a opção para selecionar
tempSelect.append(tempOption);
}
// Obtém a lista de componentes degradados
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Limpa o valor da lista suspensa
* @prarm selectId ID da lista suspensa
* @prarm index A posição do índice onde a compensação começa
*/
função isClearSelect(selectId,índice){
var comprimento=document.getElementById(selectId).options.length;
while(comprimento!=índice){
//O comprimento está mudando porque deve ser readquirido
comprimento=document.getElementById(selectId).options.length;
for(var i=índice;i<comprimento;i++)
document.getElementById(selectId).options.remove(i);
comprimento=comprimento/2;
}
}
/**
* @description Obtenha a lista de componentes degradados
* @prarm selectId1 refere-se ao ID da lista suspensa de software
* @prarm selectId2 ID da lista suspensa de componentes degenerados
*/
função getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//Lista suspensa de software de referência
var obj2=document.getElementById(selectId2);//Degenerar lista suspensa de componentes
var len=obj1.options.length;
//Quando o comprimento da lista de software referenciada é igual a 1, ela é retornada e nenhuma operação é executada.
if(len==1){
retornar falso;
}
//Limpa o valor da lista suspensa, ambos os métodos estão disponíveis
//isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var opção= obj1.options[i];
//Os itens selecionados referenciados pelo software não são adicionados
if(i!=obj1.selectedIndex){
//Clone OPTION e adicione ao SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}
Código HTML:
Copie o código do código da seguinte forma:
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>Software de cotação:</td>
<td>
<input name="yyrjMc" id="yyrjMc" type="text" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="oculto" >
<tipo de entrada = "botão"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" valor="Selecionar...">
</td>
</tr>
<tr>
<td> <span>*</span>Versão da cotação:</td>
<td id="yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</selecionar>
</td>
</tr>
<tr>
<td>Componentes degenerados:</td>
<td id="thgj">
<selecione nome="thgjDm" id="thgjDm">
<option value="-1" selecionado>Nenhum</option>
</selecionar>
</td>
</tr>
</TABELA>