1

Como em um formulário com um campo select quando option = outro sempre mudaria para um input? Como fazer?

<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>
    </div>
</form>
1
  • 1
    Está difícil de entender. Vc quer que quando selecionar a opção "Outro" no Select ele se transforme em um Input text normal, é isso?
    – hugocsl
    5/03/2018 às 22:38

2 Respostas 2

2

Pode mostrar o input ao selecionar o option = outro e esconder o select

Junto com o input tem botão cancelar que oculta o input e volta a mostrar o select

$(function() {
    $('#meuDiv').hide();

    $('#select').change(function() {
        if ($(this).val() === 'outro') {
            $('#meuDiv').show();
            $('#select').hide();
        }
    });

    $('#cancel').click(function () {
        $('#select').show();
        $('#select').val('');
        $('#meuDiv').hide();
    });
});
<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>

	<div id="meuDiv">
	    <input type="text"/>
	    <button type="button" id="cancel">Cancelar</button>
	</div>

</div>
<button type="submit">submit</button>
</form>

0

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .