下拉内容左侧

下拉内容左侧是指在下拉选择框中，选项往往分为两列，左边是选项的名称，右边是选项的说明或者更具体的信息。这种设计可以为用户提供更多的信息，帮助用户更好地理解选项。

HTML/CSS实现

实现下拉内容左侧的方式有很多，下面是一种可行的方案，使用HTML和CSS：

<div class="dropdown">
  <button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select an option
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">
      <div class="option-name">Option 1</div>
      <div class="option-description">This is the first option</div>
    </a>
    <a class="dropdown-item" href="#">
      <div class="option-name">Option 2</div>
      <div class="option-description">This is the second option</div>
    </a>
    <a class="dropdown-item" href="#">
      <div class="option-name">Option 3</div>
      <div class="option-description">This is the third option</div>
    </a>
  </div>
</div>

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.option-name {
  font-weight: bold;
}

.option-description {
  font-size: 14px;
  color: #999;
}

在上面的例子中，我们使用了Bootstrap提供的下拉选择框组件，并在里面加入了自己的样式。

JavaScript实现

如果需要动态生成下拉内容左侧的选项，我们可以使用JavaScript来实现。下面是一个使用jQuery的例子：

<div class="dropdown">
  <button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select an option
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div id="options-container"></div>
  </div>
</div>

var options = [
  { name: 'Option 1', description: 'This is the first option' },
  { name: 'Option 2', description: 'This is the second option' },
  { name: 'Option 3', description: 'This is the third option' }
];

var $optionsContainer = $('#options-container');

for (var i = 0; i < options.length; i++) {
  var option = options[i];

  var $option = $('<a>', {
    class: 'dropdown-item',
    href: '#'
  });

  var $name = $('<div>', {
    class: 'option-name',
    text: option.name
  });

  var $description = $('<div>', {
    class: 'option-description',
    text: option.description
  });

  $option.append($name);
  $option.append($description);
  $optionsContainer.append($option);
}

在这个例子中，我们首先定义了一个数组options来存储选项的信息，然后使用jQuery动态生成了下拉内容左侧的选项。

总结

下拉内容左侧可以为用户提供更多的信息，帮助用户更好地理解选项。我们可以使用HTML/CSS或JavaScript来实现它。在实现时，需要注意样式的设置和选项的生成。