Você não consegue transformar um select
em input
. Em vez disso, insira um input
tipo hidden
após o select
. Ao selecionar a opção outro
no select
, o script esconde o select
e mostra o input
no lugar, que herdará o mesmo name
do select
, e o select
perde o name
para não ter conflito ao enviar o formulário.
Veja:
$("#select").change(function(){
if($(this).val() == "outro"){
$(this)
.attr("name", "")
.hide()
.next("input").attr({
"type": "text",
"name": "opcoes"
})
.focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="alvo">
<select name="opcoes" id="select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="outro">outro</option>
</select>
<input type="hidden" />
</div>
</form>
Reversão
Caso deseje que o select
volte a aparecer, você pode incluir um pequeno botão x para reverter o processo.
Neste caso terá que inserir o input
em um elemento. No caso, usei um span
. Neste caso, o input
escondido não precisa ser do tipo hidden
, porque ele estará escondido pelo span-pai. Também é preciso alterar partes do código dado no primeiro exemplo (como seletores e capturar os tipos de eventos):
$("#select, #alvo span button").on("change click", function(e){
if($(this).val() == "outro" && e.type == "change"){
$(this)
.attr("name", "")
.hide()
.next("span")
.show()
.find("input")
.attr("name", "opcoes")
.focus();
}else if(e.target.id != "select" && e.type == "click"){
$("#select")
.attr("name", "opcoes")
.show()
.val('')
.next("span")
.hide()
.find("input")
.attr("name", "")
.val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="alvo">
<select name="opcoes" id="select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="outro">outro</option>
</select>
<span style="display: none;">
<input type="text" />
<button type="button">x</button>
</span>
</div>
</form>