From select to input

Can show input by selecting option = outro and hiding select

Along with input has botão cancelar that hides the input and returns the 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>

You can't turn a select into input. Instead, enter a input type hidden after the select. By selecting the outro option in the select, the script hides the select and shows the input in place, which will inherit the same name from the select, and the select loses the name to have no conflict when submitting the form.

See:

$("#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>

Reversal

If you want select to appear again, you can include a small button x to reverse the process.

In this case you will have to insert input into an element. In case, I used a span. In this case, the input hidden does not need to be of type hidden, because it will be hidden by the SPAN-Parent. You also need to change parts of the code given in the first example (such as selectors and capturing event types):

$("#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>