从select元素获取超过option标记的值

<select id="mySelect">
  <option value="1" data-extra="info1">Option 1</option>
  <option value="2" data-extra="info2">Option 2</option>
  <option value="3" data-extra="info3">Option 3</option>
</select>

document.getElementById('mySelect').addEventListener('change', function() {
  var selectedOption = this.options[this.selectedIndex];
  var extraInfo = selectedOption.getAttribute('data-extra');
  console.log('Selected value:', selectedOption.value);
  console.log('Extra info:', extraInfo);
});

var optionsData = [
  { value: '1', text: 'Option 1', extra: 'info1' },
  { value: '2', text: 'Option 2', extra: 'info2' },
  { value: '3', text: 'Option 3', extra: 'info3' }
];

var selectElement = document.getElementById('mySelect');

optionsData.forEach(function(optionData) {
  var option = document.createElement('option');
  option.value = optionData.value;
  option.textContent = optionData.text;
  selectElement.appendChild(option);
});

selectElement.addEventListener('change', function() {
  var selectedValue = this.value;
  var selectedOptionData = optionsData.find(function(optionData) {
    return optionData.value === selectedValue;
  });
  console.log('Selected value:', selectedValue);
  console.log('Extra info:', selectedOptionData.extra);
});