如何添加图标图像以选择选项 js？答案

【问题标题】：How to add icon images to select choices js?如何添加图标图像以选择选项 js？
【发布时间】：2022-01-27 02:21:43
【问题描述】：

有一个数组

const categories = [
    {
      value: 'Option name 1',
      label: 'Option name 1',
      id: 1,
      customProperties: {
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAyRJREFUWEftlv1LU1EYx79DJTMNKV8qEouRFSppqW1o/QG9/FIWCZGlzSVaZkilkKJWRESpKbqGlhEUlRT08qNQKFtmamUvCqNSf9BlNXyb5dbiHNlBb9PuvccfJO75bWfnPs/nfr/Puc+jGvqR4sI8XioFkNMdRUFOAaEoqCjIqwDv8/9PDdrHnSgs7IDB2M1EqShLQOoBNVSqmXV69nwAugwT+gfs9JAufQ1KS2Lg5+ctSlxJCvb0jOJwhgnmF19p8LURi3G9LhFRkYEekwnPb90SimsGLVYsXygKjhySBEgeaGzsx/7UJoyMTNAkB1PVuHB+41+KCBUPC1sEQ7UGSYkhouFkATocLlwue4+z596wREaDFnv3rGJWu1zA/YYvyMl9yV6ktDgG2Vnr4OU1Sz14QJesIIlhtY7T5E+e9tGQcXFLUV2loZaT1dU9hLT0ZrzttNHfKftW49LFTQgI8JGkniwF3Rmamq3QZ5rR2ztKt/S6CJSUxMAx8Rt5J1/h9p1PHuGlEspSkCRxOl2orPqIM0UdNKe/vw+tsb6+UZzKb2N7FeXxSN4VLpWLnZcNSCLYbL+o1Q8e9tCAwcG+sNudrO7yTkSiID8a3t7S6m7q23ABkkCd72w4lNZM627q2r5tJcqvxCMkxFe2elw16M7q6caST0qtUQvN5mAuuDkBJEHIbdbpzcxaUo9GgwZERd7FbbHFMgzdERNaW79NYyGfHmONFmp1ABcjF6CwWywLnWxhcvuupzeRDSisPWJrRVk8yL67g5A9clGSd4fPOlDMJrFsQHJrM7PMzFr3lEKSnS5ow416C80bHRWIutpE1mWk+i0LcGzMMQ1iXrU6YmH9TQuOHW9h3UJoIzlz995n6PQmJpiY2XFOarC9/Tsdt9w9eKZxa3h4YlpPJt/GW/VJiI1dIsllSRYPDv5ETm4LHj2enGL+VV/CLrNzB+kuCQgKWiAaUjQgmQOvVn5AUfFrFlw4BwqzEqtrDF1seCD/FxdtwNHs9aL7s2hA4Xg1k7VCSOFAIXWyFg0o2pM5PqgA8gqqKKgoyKsA7/NKDfIq+AciBcogLQoNigAAAABJRU5ErkJggg=='
      },
    },
    {
      value: 'Option name 2',
      label: 'Option name 2',
      id: 2,
      customProperties: {
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAyJJREFUWEftll1IFFEUx/+bSqv4kWVqgYJJZlgPpqFLuylEUBFBRSVELa74lQXZQ2APiUI99KJ9mJqkaAhWCD1IRUGsrrFqmg9piaGFhqVsqbm2pq4T98redFpjZq6ExNy3nb1zzm/+/3PvOZqaUaOAFbw0KiCnO6qCnAJCVVBVkFcB3vf/nxqcnnLi/uV2PK/oYaKYinVIOh0FjWZpnd42fUZZhgVjww66aU/aFqQUxmO1j6ckcWUpaBuwozTDgvetIzT4xqgA5FQmISwm0G0y8f6thlBklRsQuMFHEhzZJAuQvND1Ygg3jGZM2WdokmRjFE5e3fmHImLFg8J8kVGqR/SuEMlwigCdswIait+g/konS0RU0R3bxKwWBKClvh9VuS3sQ1IK4rAvJwarPP5SD27QZStIYoyPOFCVa8Xrx4M0ZGR8ENJL9NRysoZ6x3E7rQkDXd/ob31KJE5dS4C3n5cs9RQp6MrQ83IYd7KbYRu000d706NxojAezpk53LvYiua6PrfwcgkVKUiSzDkFPC3pRl1+B82p9fVCZqketk+TqM1rY89M13VIPBIhl4vtVwxIIkyOTVOr2x59pAH912sx7XCyujt0YTsO58XCw1Ne3S38Gi5AEmiwexQlpkZadwvXjgNhSC3SISDYW7F6XDXoyuruxJIrJbvCgM0JwVxwywJIgpDTXJZpYdaSeiRXD1GRd3Fb/KXvO8qzLOhrty1iIVdPZpkBoZH+XIxcgOJusSZkvt6U9l13X6IYUFx7xNbUYh0gCKyD0GdFiUg8+rvLyJVTMSA5tRU5zcxa15RCAGovvYK5upeyhG9bizN3d7Mu808Af/6YXQSxolodsbaxpheV562sW4htJHusD/vpyXYtKbPjstTgh86vuGk0sx681LjlmJhZ1JPJ3XiuOhkRsetkuSyrBidsU6jMtaKjYUBSfYm7TNzBcJiKdPAL0kqGlAxI5sAnt7rxoGB+OCBLPAeKsxKrn5W/Y8MD+f94fhz2n42R3J8lA4rHq6WsFUOKBwq5k7VkQMmeLPNGFZBXUFVBVUFeBXjfV2uQV8FfuQK+kKios8gAAAAASUVORK5CYII='
      },
    },
    {
      value: 'Option name 3',
      label: 'Option name 3',
      id: 3,
      customProperties: {
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAx5JREFUWEftlmtIFFEUx/+rGKwWpZtZRvTSFLMsQ0JClFyNECOiAutDEUFgYKDoluXqbmWupWRQH/wQgYSQfYgkMldFMTOMLK1ES3sQalbaw1fmY+NcmEGnVWbmGkjM/bZ379zzm///nDlH9yix1YE5vHQaIKc7moKcAkJTUFOQVwHe5/+fHBwZ+4Wr9Rdx+8VNUZSTUVbEB+2DDrpphXra+RhZ9lT0Dn1hZ/YEH8Dx8FTo3fSyxFWkYHd/JywVqWjubmSXr/JcC2tsPvwMAU6DSc+HLt+KTGMuvD18ZMHRIUWA9EDDxzqklyVhaHSQBdkVtB8ntp36SxGp4ksX+CIj2obNvmGy4VQBjk+Mo6ixEIUNBWIgUiV2XbxotQMO2N/cQ251pvgiZGvCpsNw0bn+W0C6vW+oF7YaM2rfVbJg631CcHp7NrOc1vtvHTDbU9D+tZX93hmwG8kRZ+Axb74iOFUKChGedT3B2UoTPvV3sa29Gw6y5B+bGEN+7Tncb7vjFF4poeIcFAJMOMZR/PwGq2xa7m4eyIjOQc9ANy4/zBb3qNKN/nFKucTzqgHphv6Rn7BVm1HVUcYu9NQbQMUhFNChLcdwNCwJri7K8m7y23AB0kXtvW0wlyezvJu8IlZHwxRphZe7QbV6XDkoRHVWsfRJyTJewsZloVxwswJIl1A1WyrSRGspH+nTQyryLm6LP/74AGtFGl71NE1hoU+P2ZiLFQtXcjFyAUq7hcHdm8Go7bvO3kQ1oDT3yFZTlBW0L3QQ2kuLsiDGP27GgWImiVUDUtWer0oXrRWmFApWUHcBd1tusbh+iwNhjckTu4xSv1UBDo8OT4GYU62OLCxtKUFOtVnsFlIb6Uz561JW2cKSMzvOSg62fn6J9AdJYg+ebtwa/D0wpSfTtzF7xxUELglW5LIii78P98FWk4mat3ZZ+SXtMpFrYmCKtGCR3ks2pGxAmgOLm67jWn2eeLl0DpRGJatLmovE4YH+TwxPQULIEdn9WTagdLyazloppHSgUDpZywaU7cksH9QAeQXVFNQU5FWA93ktB3kV/APDgsJQG+MraAAAAABJRU5ErkJggg=='
      },        
    },
  ]

我正在尝试为选项添加图像选择https://github.com/Choices-js/Choices#callbackoncreatetemplates

这样做

const categories = [{
    value: 'Option name 1',
    label: 'Option name 1',
    id: 1,
    customProperties: {
      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAyRJREFUWEftlv1LU1EYx79DJTMNKV8qEouRFSppqW1o/QG9/FIWCZGlzSVaZkilkKJWRESpKbqGlhEUlRT08qNQKFtmamUvCqNSf9BlNXyb5dbiHNlBb9PuvccfJO75bWfnPs/nfr/Puc+jGvqR4sI8XioFkNMdRUFOAaEoqCjIqwDv8/9PDdrHnSgs7IDB2M1EqShLQOoBNVSqmXV69nwAugwT+gfs9JAufQ1KS2Lg5+ctSlxJCvb0jOJwhgnmF19p8LURi3G9LhFRkYEekwnPb90SimsGLVYsXygKjhySBEgeaGzsx/7UJoyMTNAkB1PVuHB+41+KCBUPC1sEQ7UGSYkhouFkATocLlwue4+z596wREaDFnv3rGJWu1zA/YYvyMl9yV6ktDgG2Vnr4OU1Sz14QJesIIlhtY7T5E+e9tGQcXFLUV2loZaT1dU9hLT0ZrzttNHfKftW49LFTQgI8JGkniwF3Rmamq3QZ5rR2ztKt/S6CJSUxMAx8Rt5J1/h9p1PHuGlEspSkCRxOl2orPqIM0UdNKe/vw+tsb6+UZzKb2N7FeXxSN4VLpWLnZcNSCLYbL+o1Q8e9tCAwcG+sNudrO7yTkSiID8a3t7S6m7q23ABkkCd72w4lNZM627q2r5tJcqvxCMkxFe2elw16M7q6caST0qtUQvN5mAuuDkBJEHIbdbpzcxaUo9GgwZERd7FbbHFMgzdERNaW79NYyGfHmONFmp1ABcjF6CwWywLnWxhcvuupzeRDSisPWJrRVk8yL67g5A9clGSd4fPOlDMJrFsQHJrM7PMzFr3lEKSnS5ow416C80bHRWIutpE1mWk+i0LcGzMMQ1iXrU6YmH9TQuOHW9h3UJoIzlz995n6PQmJpiY2XFOarC9/Tsdt9w9eKZxa3h4YlpPJt/GW/VJiI1dIsllSRYPDv5ETm4LHj2enGL+VV/CLrNzB+kuCQgKWiAaUjQgmQOvVn5AUfFrFlw4BwqzEqtrDF1seCD/FxdtwNHs9aL7s2hA4Xg1k7VCSOFAIXWyFg0o2pM5PqgA8gqqKKgoyKsA7/NKDfIq+AciBcogLQoNigAAAABJRU5ErkJggg=='
    },
  },
  {
    value: 'Option name 2',
    label: 'Option name 2',
    id: 2,
    customProperties: {
      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAyJJREFUWEftll1IFFEUx/+bSqv4kWVqgYJJZlgPpqFLuylEUBFBRSVELa74lQXZQ2APiUI99KJ9mJqkaAhWCD1IRUGsrrFqmg9piaGFhqVsqbm2pq4T98redFpjZq6ExNy3nb1zzm/+/3PvOZqaUaOAFbw0KiCnO6qCnAJCVVBVkFcB3vf/nxqcnnLi/uV2PK/oYaKYinVIOh0FjWZpnd42fUZZhgVjww66aU/aFqQUxmO1j6ckcWUpaBuwozTDgvetIzT4xqgA5FQmISwm0G0y8f6thlBklRsQuMFHEhzZJAuQvND1Ygg3jGZM2WdokmRjFE5e3fmHImLFg8J8kVGqR/SuEMlwigCdswIait+g/konS0RU0R3bxKwWBKClvh9VuS3sQ1IK4rAvJwarPP5SD27QZStIYoyPOFCVa8Xrx4M0ZGR8ENJL9NRysoZ6x3E7rQkDXd/ob31KJE5dS4C3n5cs9RQp6MrQ83IYd7KbYRu000d706NxojAezpk53LvYiua6PrfwcgkVKUiSzDkFPC3pRl1+B82p9fVCZqketk+TqM1rY89M13VIPBIhl4vtVwxIIkyOTVOr2x59pAH912sx7XCyujt0YTsO58XCw1Ne3S38Gi5AEmiwexQlpkZadwvXjgNhSC3SISDYW7F6XDXoyuruxJIrJbvCgM0JwVxwywJIgpDTXJZpYdaSeiRXD1GRd3Fb/KXvO8qzLOhrty1iIVdPZpkBoZH+XIxcgOJusSZkvt6U9l13X6IYUFx7xNbUYh0gCKyD0GdFiUg8+rvLyJVTMSA5tRU5zcxa15RCAGovvYK5upeyhG9bizN3d7Mu808Af/6YXQSxolodsbaxpheV562sW4htJHusD/vpyXYtKbPjstTgh86vuGk0sx681LjlmJhZ1JPJ3XiuOhkRsetkuSyrBidsU6jMtaKjYUBSfYm7TNzBcJiKdPAL0kqGlAxI5sAnt7rxoGB+OCBLPAeKsxKrn5W/Y8MD+f94fhz2n42R3J8lA4rHq6WsFUOKBwq5k7VkQMmeLPNGFZBXUFVBVUFeBXjfV2uQV8FfuQK+kKios8gAAAAASUVORK5CYII='
    },
  },
  {
    value: 'Option name 3',
    label: 'Option name 3',
    id: 3,
    customProperties: {
      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAx5JREFUWEftlmtIFFEUx/+rGKwWpZtZRvTSFLMsQ0JClFyNECOiAutDEUFgYKDoluXqbmWupWRQH/wQgYSQfYgkMldFMTOMLK1ES3sQalbaw1fmY+NcmEGnVWbmGkjM/bZ379zzm///nDlH9yix1YE5vHQaIKc7moKcAkJTUFOQVwHe5/+fHBwZ+4Wr9Rdx+8VNUZSTUVbEB+2DDrpphXra+RhZ9lT0Dn1hZ/YEH8Dx8FTo3fSyxFWkYHd/JywVqWjubmSXr/JcC2tsPvwMAU6DSc+HLt+KTGMuvD18ZMHRIUWA9EDDxzqklyVhaHSQBdkVtB8ntp36SxGp4ksX+CIj2obNvmGy4VQBjk+Mo6ixEIUNBWIgUiV2XbxotQMO2N/cQ251pvgiZGvCpsNw0bn+W0C6vW+oF7YaM2rfVbJg631CcHp7NrOc1vtvHTDbU9D+tZX93hmwG8kRZ+Axb74iOFUKChGedT3B2UoTPvV3sa29Gw6y5B+bGEN+7Tncb7vjFF4poeIcFAJMOMZR/PwGq2xa7m4eyIjOQc9ANy4/zBb3qNKN/nFKucTzqgHphv6Rn7BVm1HVUcYu9NQbQMUhFNChLcdwNCwJri7K8m7y23AB0kXtvW0wlyezvJu8IlZHwxRphZe7QbV6XDkoRHVWsfRJyTJewsZloVxwswJIl1A1WyrSRGspH+nTQyryLm6LP/74AGtFGl71NE1hoU+P2ZiLFQtXcjFyAUq7hcHdm8Go7bvO3kQ1oDT3yFZTlBW0L3QQ2kuLsiDGP27GgWImiVUDUtWer0oXrRWmFApWUHcBd1tusbh+iwNhjckTu4xSv1UBDo8OT4GYU62OLCxtKUFOtVnsFlIb6Uz561JW2cKSMzvOSg62fn6J9AdJYg+ebtwa/D0wpSfTtzF7xxUELglW5LIii78P98FWk4mat3ZZ+SXtMpFrYmCKtGCR3ks2pGxAmgOLm67jWn2eeLl0DpRGJatLmovE4YH+TwxPQULIEdn9WTagdLyazloppHSgUDpZywaU7cksH9QAeQXVFNQU5FWA93ktB3kV/APDgsJQG+MraAAAAABJRU5ErkJggg=='
    },
  },
]

const choicesCustomhCategories = new Choices(
  document.querySelector('.js-select'), {
    callbackOnCreateTemplates: function(template) {
      let classNames = this.config.classNames;
      let itemSelectText = this.config.itemSelectText;
      return {
        choice: function(classNames, data) {
          return categories.map(item => {
            return template(`<div class="${String(classNames.item)} ${String(classNames.itemChoice)} ${String(item.disabled ? classNames.itemDisabled : classNames.itemSelectable)}"
                            data-select-text="${String(itemSelectText)}"
                            data-choice ${String(item.disabled ? 'data-choice-disabled aria-disabled=true' : 'data-choice-selectable')}
                            data-id="${String(item.id)}"
                            data-value="${String(item.value)}"
                            data-label="${String(item.label)}"
                            ${String(data.groupId > 0 ? 'role="treeitem"' : 'role="option"')}>                  
                <img src="${item.customProperties.icon}" alt="">
                                ${String(item.label)}
                            </div>`)
          })
        }
      }
    }
  });

body {
  padding: 2em;
  color: #000;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css" />
<script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>

<select class="js-select">
  <option value="">This is a placeholder</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

遇到错误

告诉我如何正确地将数组中的数据显示到自定义选择中？

目标：为每个选项添加一个图标图像

欢迎任何帮助。

谢谢

【问题讨论】：

标签： javascript html select

【解决方案1】：

文档没有说明如何添加不同的图标，所以我做了一个自定义模板https://github.com/Choices-js/Choices#callbackoncreatetemplates

使用值显示图标 -

<option value="url image">label name</option>

例子

const choicesCustomCategories = new Choices(
  document.querySelector('.js-select'), {
    callbackOnCreateTemplates: function(template) {
      let classNames = this.config.classNames;
      let itemSelectText = this.config.itemSelectText;
      return {
        choice: function(classNames, data) {
          return template(`<div class="${String(classNames.item)} ${String(classNames.itemChoice)} ${String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}"
                            data-select-text="${String(itemSelectText)}"
                            data-choice ${String(data.disabled ? 'data-choice-disabled aria-disabled=true' : 'data-choice-selectable')}
                            data-id="${String(data.id)}"
                            data-value="${String(data.value)}"
                            data-label="${String(data.label)}"
                            ${String(data.groupId > 0 ? 'role="treeitem"' : 'role="option"')}>
                                <img src="${String(data.value)}" alt="">
                                ${String(data.label)}
                            </div>`)
        }
      }
    }
  });

body {
  padding: 2em;
  color: #000;
}

.choices__item {
  display: flex;
  align-items: center;
  line-height: 1;
}

.choices__item img {
  max-height: 20px;
  max-width: 20px;
  margin-right: 10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css" />
<script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>

<select class="js-select">
  <option value="">This is a placeholder</option>
  <option value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAyRJREFUWEftlv1LU1EYx79DJTMNKV8qEouRFSppqW1o/QG9/FIWCZGlzSVaZkilkKJWRESpKbqGlhEUlRT08qNQKFtmamUvCqNSf9BlNXyb5dbiHNlBb9PuvccfJO75bWfnPs/nfr/Puc+jGvqR4sI8XioFkNMdRUFOAaEoqCjIqwDv8/9PDdrHnSgs7IDB2M1EqShLQOoBNVSqmXV69nwAugwT+gfs9JAufQ1KS2Lg5+ctSlxJCvb0jOJwhgnmF19p8LURi3G9LhFRkYEekwnPb90SimsGLVYsXygKjhySBEgeaGzsx/7UJoyMTNAkB1PVuHB+41+KCBUPC1sEQ7UGSYkhouFkATocLlwue4+z596wREaDFnv3rGJWu1zA/YYvyMl9yV6ktDgG2Vnr4OU1Sz14QJesIIlhtY7T5E+e9tGQcXFLUV2loZaT1dU9hLT0ZrzttNHfKftW49LFTQgI8JGkniwF3Rmamq3QZ5rR2ztKt/S6CJSUxMAx8Rt5J1/h9p1PHuGlEspSkCRxOl2orPqIM0UdNKe/vw+tsb6+UZzKb2N7FeXxSN4VLpWLnZcNSCLYbL+o1Q8e9tCAwcG+sNudrO7yTkSiID8a3t7S6m7q23ABkkCd72w4lNZM627q2r5tJcqvxCMkxFe2elw16M7q6caST0qtUQvN5mAuuDkBJEHIbdbpzcxaUo9GgwZERd7FbbHFMgzdERNaW79NYyGfHmONFmp1ABcjF6CwWywLnWxhcvuupzeRDSisPWJrRVk8yL67g5A9clGSd4fPOlDMJrFsQHJrM7PMzFr3lEKSnS5ow416C80bHRWIutpE1mWk+i0LcGzMMQ1iXrU6YmH9TQuOHW9h3UJoIzlz995n6PQmJpiY2XFOarC9/Tsdt9w9eKZxa3h4YlpPJt/GW/VJiI1dIsllSRYPDv5ETm4LHj2enGL+VV/CLrNzB+kuCQgKWiAaUjQgmQOvVn5AUfFrFlw4BwqzEqtrDF1seCD/FxdtwNHs9aL7s2hA4Xg1k7VCSOFAIXWyFg0o2pM5PqgA8gqqKKgoyKsA7/NKDfIq+AciBcogLQoNigAAAABJRU5ErkJggg==">Option 1</option>
  <option value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAyJJREFUWEftll1IFFEUx/+bSqv4kWVqgYJJZlgPpqFLuylEUBFBRSVELa74lQXZQ2APiUI99KJ9mJqkaAhWCD1IRUGsrrFqmg9piaGFhqVsqbm2pq4T98redFpjZq6ExNy3nb1zzm/+/3PvOZqaUaOAFbw0KiCnO6qCnAJCVVBVkFcB3vf/nxqcnnLi/uV2PK/oYaKYinVIOh0FjWZpnd42fUZZhgVjww66aU/aFqQUxmO1j6ckcWUpaBuwozTDgvetIzT4xqgA5FQmISwm0G0y8f6thlBklRsQuMFHEhzZJAuQvND1Ygg3jGZM2WdokmRjFE5e3fmHImLFg8J8kVGqR/SuEMlwigCdswIait+g/konS0RU0R3bxKwWBKClvh9VuS3sQ1IK4rAvJwarPP5SD27QZStIYoyPOFCVa8Xrx4M0ZGR8ENJL9NRysoZ6x3E7rQkDXd/ob31KJE5dS4C3n5cs9RQp6MrQ83IYd7KbYRu000d706NxojAezpk53LvYiua6PrfwcgkVKUiSzDkFPC3pRl1+B82p9fVCZqketk+TqM1rY89M13VIPBIhl4vtVwxIIkyOTVOr2x59pAH912sx7XCyujt0YTsO58XCw1Ne3S38Gi5AEmiwexQlpkZadwvXjgNhSC3SISDYW7F6XDXoyuruxJIrJbvCgM0JwVxwywJIgpDTXJZpYdaSeiRXD1GRd3Fb/KXvO8qzLOhrty1iIVdPZpkBoZH+XIxcgOJusSZkvt6U9l13X6IYUFx7xNbUYh0gCKyD0GdFiUg8+rvLyJVTMSA5tRU5zcxa15RCAGovvYK5upeyhG9bizN3d7Mu808Af/6YXQSxolodsbaxpheV562sW4htJHusD/vpyXYtKbPjstTgh86vuGk0sx681LjlmJhZ1JPJ3XiuOhkRsetkuSyrBidsU6jMtaKjYUBSfYm7TNzBcJiKdPAL0kqGlAxI5sAnt7rxoGB+OCBLPAeKsxKrn5W/Y8MD+f94fhz2n42R3J8lA4rHq6WsFUOKBwq5k7VkQMmeLPNGFZBXUFVBVUFeBXjfV2uQV8FfuQK+kKios8gAAAAASUVORK5CYII=">Option 2</option>
  <option value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAyRJREFUWEftlv1LU1EYx79DJTMNKV8qEouRFSppqW1o/QG9/FIWCZGlzSVaZkilkKJWRESpKbqGlhEUlRT08qNQKFtmamUvCqNSf9BlNXyb5dbiHNlBb9PuvccfJO75bWfnPs/nfr/Puc+jGvqR4sI8XioFkNMdRUFOAaEoqCjIqwDv8/9PDdrHnSgs7IDB2M1EqShLQOoBNVSqmXV69nwAugwT+gfs9JAufQ1KS2Lg5+ctSlxJCvb0jOJwhgnmF19p8LURi3G9LhFRkYEekwnPb90SimsGLVYsXygKjhySBEgeaGzsx/7UJoyMTNAkB1PVuHB+41+KCBUPC1sEQ7UGSYkhouFkATocLlwue4+z596wREaDFnv3rGJWu1zA/YYvyMl9yV6ktDgG2Vnr4OU1Sz14QJesIIlhtY7T5E+e9tGQcXFLUV2loZaT1dU9hLT0ZrzttNHfKftW49LFTQgI8JGkniwF3Rmamq3QZ5rR2ztKt/S6CJSUxMAx8Rt5J1/h9p1PHuGlEspSkCRxOl2orPqIM0UdNKe/vw+tsb6+UZzKb2N7FeXxSN4VLpWLnZcNSCLYbL+o1Q8e9tCAwcG+sNudrO7yTkSiID8a3t7S6m7q23ABkkCd72w4lNZM627q2r5tJcqvxCMkxFe2elw16M7q6caST0qtUQvN5mAuuDkBJEHIbdbpzcxaUo9GgwZERd7FbbHFMgzdERNaW79NYyGfHmONFmp1ABcjF6CwWywLnWxhcvuupzeRDSisPWJrRVk8yL67g5A9clGSd4fPOlDMJrFsQHJrM7PMzFr3lEKSnS5ow416C80bHRWIutpE1mWk+i0LcGzMMQ1iXrU6YmH9TQuOHW9h3UJoIzlz995n6PQmJpiY2XFOarC9/Tsdt9w9eKZxa3h4YlpPJt/GW/VJiI1dIsllSRYPDv5ETm4LHj2enGL+VV/CLrNzB+kuCQgKWiAaUjQgmQOvVn5AUfFrFlw4BwqzEqtrDF1seCD/FxdtwNHs9aL7s2hA4Xg1k7VCSOFAIXWyFg0o2pM5PqgA8gqqKKgoyKsA7/NKDfIq+AciBcogLQoNigAAAABJRU5ErkJggg==">Option 3</option>
</select>

【讨论】：

您好，谢谢您的回答。但是，只有代码而没有解释的答案并不是很有帮助。考虑添加一些有关解决方案和方法的详细信息。
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。