显示每个选择选项的描述

Question

我遇到了一个问题，希望能帮助您设计出富有创意的轻巧方法。每当用户从选择列表中选择on选项时，我都需要显示描述性文本。我会用类似的东西：

jQuery

$('#machines').change(function() {
  var $selected = $(this).find(':selected');
  $('#description').html($selected.data('description'));
}).trigger('change');

<div class="form-group">
  <label for="machines">Machines</label>
  <select id="machines" class="form-control">
    <option data-description="Printer">Printer</option>
    <option data-description="Copy">Copy</option>
    <option data-description="Scanner">Scanner</option>
  </select>
</div>
<div class="form-group">
  <span id="description"></span>
</div>


<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<script type="text-javascript">
    $('#machines').change(function() {
        var $selected = $(this).find(':selected');
        $('#description').html($selected.data('description'));
    }).trigger('change');
</script>

Answer 1

该功能可能在文档准备好之前就已执行。 尝试像这样使用document.ready函数：

$( document ).ready(function() {
    $('#machines').change(function() {
        var $selected = $(this).find(':selected');
        $('#description').html($selected.data('description'));
    }).trigger('change');
});