Как создать текстовое поле после выбора опции из раскрывающегося списка?

Question

Я пытаюсь создать раскрывающийся список с четырьмя параметрами, так что, если я выберу четвертый вариант, я хочу создать текстовое поле, чтобы я мог получить значение, введенное в этом поле, используя «$ _GET»

Что-то вроде этого;

<select name="value"> 
<option value="value1">Option 1</option> 
<option value="value2">Option 2</option> 
<option value="value3">Option 3</option> 
<!-- And a 4th one --> 
</select> 

И если выбран 4-й, поле должно выглядеть следующим образом;

<input type="text" name="firstname"> 

---

Edit;

Мой текущий код;

<script> 
jQuery(function($){      //calling the code inside braces when document loads and passing jQuery object as '$' parameter; 
    $("select[name='sortby']").change(function(){  //binding an event that fires every time select value changes 
     var select = $(this);    //caching select, which value was changed 
     if(select.val() === "byDefindex"){  //checking if we selected the right option 
      $("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it 
     } 
    });   
}); 
</script> 




<form action="<?php $_PHP_SELF ?>" method="GET"> 

    Select: 
    <br /> 
     <select name="sortby"> 
      <option value="playHours">Play Hours</option> 
      <option value="lastLogin">Last Login</option> 
      <option value="byDefindex">By Defindex</option> 
     </select> 
    <br /> 

    <input type="submit" /> 

</form> 

Answer 1

Если четвёртый вариант заключается в следующем:

<option value="value4">Option 4</option> 

Вы можете использовать JQuery для отображения поля. Положите поле в <div>

<div id="field"><input type="text" name="firstname"></div> 

Теперь,

<script type="text/javascript"> 
$(document).ready(function(){ 

$('input[name="value"]').change(function(){ 
var v = $('input[name="value"]').val(); 
if(v=="value4") $('#field').show(); 
else $('#field').hide(); 
}) 
}) 

Answer 2

Это обычно делается с помощью JavaScript; что-то вроде этого (используя популярную библиотеку JavaScript, jQuery):

jQuery(function($){      //calling the code inside braces when document loads and passing jQuery object as '$' parameter; 
    $("select[name='value']").change(function(){  //binding an event that fires every time select value changes 
     var select = $(this);    //caching select, which value was changed 
     if(select.val() === "value4"){  //checking if we selected the right option 
      $("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it 
     } 
    });   
}); 

Надеюсь, что это поможет. Вы можете найти больше здесь jQuery site