單擊按鈕后，在選定的下拉選項上顯示清單

Question

我是Javascript和JQuery的新手。

例如：當我選擇Dragon並單擊一個按鈕時，頁面將重新加載，並且所選選項（Dragon）將在文本（Dragon）旁邊顯示清單（fontawesome）。

對不起，我的英語不好。

  <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

這是你想要的？

 <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>