On clicking a button, show checklist on selected dropdown option

Question

I'm new in Javascript and JQuery.

For Example: When I select Dragon and then click a button, the page will reload, and the selected option (Dragon) will show checklist (fontawesome) beside the text (Dragon).

Sorry for my bad English.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="form-group"> <label for="example">Pet</label> <select class="form-control" id="example"> <option>-Select Pet-</option> <option>Eagle</option> <option>Dragon</option> <option>Lion</option> </select> </div> <button type="submit" class="btn btn-primary">OK</button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 

Answer 1

Is this what you are looking for?

 <label for="example">Pet</label> <select class="form-control" id="slct-pet"> <option>-Select Pet-</option> <option id="eagle" value="eagle">Eagle</option> <option id="dragon" value="dragon">Dragon</option> <option id="lion" value="lion">Lion</option> </select> <button id="select">OK</button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script> $(() => { $('#slct-pet').on('change', function() { let selected = $(this).val(); $('#select').on('click', () => { $('#'+selected).prepend('<p>CHECKED</p>') }) }) }) </script>