javascript - 单击按钮时，在选定的下拉选项上显示 list

Question

我是 Javascript 和 JQuery 新手。

例如:当我选择 Dragon 然后单击按钮时，页面将重新加载，并且所选选项(Dragon)将在文本(Dragon)旁边显示 list (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>