Выпадающие меню являются распространенным элементом веб-разработки и часто требуют извлечения выделенного текста из значения раскрывающегося списка. В этой статье мы рассмотрим различные методы достижения этой цели с использованием различных технологий, таких как JavaScript и jQuery. Мы предоставим примеры кода для каждого метода, чтобы помочь вам эффективно реализовать их в своих проектах.

Метод 1: JavaScript – Vanilla
Пример кода:

const dropdown = document.getElementById('myDropdown');
const selectedText = dropdown.options[dropdown.selectedIndex].text;
console.log(selectedText);

Метод 2: JavaScript – jQuery
Пример кода:

const selectedText = $('#myDropdown option:selected').text();
console.log(selectedText);

Метод 3: JavaScript — прослушиватель событий
Пример кода:

document.getElementById('myDropdown').addEventListener('change', function() {
  const selectedText = this.options[this.selectedIndex].text;
  console.log(selectedText);
});

Метод 4: JavaScript – Vue.js
Пример кода:

<template>
  <select v-model="selectedOption">
    <option v-for="option in options" :value="option.value">{{ option.text }}</option>
  </select>
</template>
<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { text: 'Option 1', value: '1' },
        { text: 'Option 2', value: '2' },
        { text: 'Option 3', value: '3' },
      ],
    };
  },
  watch: {
    selectedOption(newValue) {
      console.log(newValue);
    },
  },
};
</script>

Метод 5: jQuery
Пример кода:

const selectedText = $('#myDropdown option:selected').text();
console.log(selectedText);

В этой статье мы рассмотрели несколько методов извлечения выделенного текста из раскрывающегося списка. Мы рассмотрели ванильный JavaScript, jQuery и даже продемонстрировали, как этого добиться с помощью Vue.js. Используя эти примеры кода, вы можете легко реализовать желаемую функциональность в своих проектах веб-разработки. Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего проекта и стилю кодирования.