Capítulo 13

Métodos do objeto select - Exemplo 3

JavaScript

<script type="text/javascript">
window.onload = function () {
var el, btnAdi, btnRem, novaOpcao; 
	el = document.getElementById("cidade");
	btnAdi = document.getElementById("adicionar");	
	btnRem = document.getElementById("remover");	
	novaOpcao = document.createElement("option");
	novaOpcao.text = "Cuiabá";
	novaOpcao.value = "mt";
	
	btnAdi.onclick	= function() {
		try {
			el.add(novaOpcao, el.options[1]);
		} catch(e) {
			el.add(novaOpcao);
		}	
	}

	btnRem.onclick	= function() {
		el.remove(0);
	}
}
<script>

HTML

...
<form name="form1" action="" method="post">
<fieldset>
<legend>Formulário com select</legend>
<label for="cidade">Cidade:</label><br />
<select title="Selecione uma cidade" name="cidade" id="cidade" multiple="multiple">
<option value="rn">Caicó</option>
<option value="sc">Florianópolis</option>
<option value="rj">Rio de Janeiro</option>
<option value="sp">São Paulo</option>
<option value="mg">Uberaba</option>
</select>
</fieldset>
</form>

<button type="button" id="adicionar">Adicionar uma opção</button>
<button type="button" id="remover">Remover uma opção</button>
...
Formulário com select