CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
Kaw123
Kaw123

Reputation: 89

Adding form fields according to drop down selections of the user

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.

Upvotes: 0

Views: 59

Answers (1)

Braza
Braza

Reputation: 425

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

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

Upvotes: 1

Related Questions