如何在select标签中显示选中选项的附加数据

<select id="mySelect">
  <option value="1" data-info="附加数据1">选项1</option>
  <option value="2" data-info="附加数据2">选项2</option>
  <option value="3" data-info="附加数据3">选项3</option>
</select>

<script>
  const select = document.getElementById('mySelect');
  select.addEventListener('change', function() {
    const selectedOption = select.options[select.selectedIndex];
    const additionalData = selectedOption.getAttribute('data-info');
    console.log(additionalData);
  });
</script>

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<script>
  const data = {
    '1': '附加数据1',
    '2': '附加数据2',
    '3': '附加数据3'
  };

  const select = document.getElementById('mySelect');
  select.addEventListener('change', function() {
    const selectedValue = select.value;
    const additionalData = data[selectedValue];
    console.log(additionalData);
  });
</script>

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<script>
  const select = document.getElementById('mySelect');
  select.addEventListener('change', function() {
    const selectedValue = select.value;
    // 发送AJAX请求获取附加数据
    // 这里使用了axios库来发送AJAX请求，你也可以使用其他库或原生的XMLHttpRequest对象
    axios.get('/getAdditionalData', {
      params: {
        value: selectedValue
      }
    })
    .then(function(response) {
      const additionalData = response.data;
      console.log(additionalData);
    })
    .catch(function(error) {
      console.error(error);
    });
  });
</script>