当动态选项增值jquery时，下拉菜单设计不正确

<select id="myDropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

$(document).ready(function() {
  // 选择下拉菜单元素
  var dropdown = $('#myDropdown');
  
  // 添加选项
  dropdown.append('<option value="option4">Option 4</option>');
  
  // 设置选中项
  dropdown.val('option2');
});

#myDropdown {
  width: 200px;
  height: 30px;
  /* 其他样式属性 */
}

$(document).ready(function() {
  // 异步加载数据
  $.ajax({
    url: 'data.php',
    success: function(data) {
      // 数据加载成功后更新下拉菜单
      var dropdown = $('#myDropdown');
      dropdown.empty(); // 清空原有选项
      
      // 添加新选项
      $.each(data, function(index, option) {
        dropdown.append('<option value="' + option.value + '">' + option.label + '</option>');
      });
    }
  });
});