Adding form fields according to drop down selections of the user

Question

What i'm trying to achieve is adding input fields relevant to user's input on the drop down selection.So then next a text field appears, to the selection.I want to keep on appending those selection input fields.

Following is what i have tried so far,

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>



<script>
$(document).ready(function(){
  
    $("#volvo").click(function(){
        $("option").append("<li>Volvo: <input type="text" name="volvotype" ></li>");
    });


  $("#saab").click(function(){
        $("option").append("<li>Saab Number: <input type="text" name="saabtype" value="Mickey"><br></li>");
    });

$("#opel").click(function(){
        $("option").append("<li>opel type: <input type="text" name="opeltype" value="Mickey"><br></li>");
    });

$("#audi").click(function(){
        $("option").append("<li>audi type: <input type="text" name="auditype" value="Mickey"><br></li>");
    });


});


</script>

</head>
<body>
<select>
  <option value="volvo" id="volvo">Volvo</option>
  <option value="saab" id="saab">Saab</option>
  <option value="opel" id="opel">Opel</option>
  <option value="audi" id="audi">Audi</option>
</select>
  
</body>
</html>

EDIT

as @Braza suggested, i don't want to override, i want to append each selected(through dropdown menu) input fields one by one.

Possible duplicate of [jquery select change event get selected option](http://stackoverflow.com/questions/12750307/jquery-select-change-event-get-selected-option) — Braza, Apr 03 '16 at 03:09
You want to append the input in the drop down or on the page? — jack blank, Apr 03 '16 at 03:33

score 1 · Accepted Answer · answered Apr 03 '16 at 03:38

1

I created this fiddle to demonstrate https://jsfiddle.net/jbzL55ca/3

$('select.theSelect').on('change', function (e) {}

answered Apr 03 '16 at 03:38

Braza

425
4
15

Adding form fields according to drop down selections of the user

1 Answers1