如何在 <select> html 标记中将字符串添加到显示/选择的选项？

Question

假设我有以下 HTML ...

<select>

  <option>1</option>

  <option>2</option>

  <option>3</option>

</select>

我想显示带有附加字符串的选定选项，该字符串根据下拉列表中的选定数字显示如下“数量：1”、“数量：2”、“数量：3”的数量。

在选项下拉列表中，我只想显示数字（即没有“数量：”字符串前置）。这种 qty 下拉列表样式的示例是 Amazon.com 产品：Amazon Product Example w。数量下拉列表。您应该会在页面右侧看到“数量：”下拉菜单。

这就是我的目标，它需要跨桌面和移动设备工作。

我已经尝试过伪元素并将跨度作为子元素添加到选择标签，但无济于事。

如何实现这种类型的下拉菜单？

Answer 1

label {&nbsp; position: relative;&nbsp; background: #e7e9ec;&nbsp; display: inline-block;&nbsp; height: 25px;&nbsp; width: 100px;}select,span {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;}select {&nbsp; width: 100%;&nbsp; padding: 4px 0;&nbsp; text-indent: 5ch;&nbsp; background: transparent;&nbsp; border-radius: 3px;&nbsp; border-color: #ADB1B8 #A2A6AC #8D9096;&nbsp; border-style: solid;}select:focus {&nbsp; outline: 0;&nbsp; border-color: #e77600;&nbsp; box-shadow: 0 0 3px 2px rgba(228, 121, 17, .5);}span {&nbsp; top: 4px;&nbsp; left: 6px;}option[disabled] {&nbsp; background: #EEE;&nbsp; font-size: 1px;}<label for="select"><span>Qty: </span><select id="select">&nbsp; <option value="0">0 (Delete)</option>&nbsp; <option disabled></option>&nbsp; <option value="1" selected>1</option>&nbsp; <option value="2">2</option>&nbsp; <option value="3">3</option>&nbsp; <option value="4">4</option>&nbsp; <option disabled ></option>&nbsp; <option>+10</option></select></label>