Блог

Главная - Вопросы по программированию - как я могу получить все опции из select с помощью javascript / jQuery и сохранить данные в объекте

как я могу получить все опции из select с помощью javascript / jQuery и сохранить данные в объекте

#javascript

Вопрос:

 <select id='listOfOptions' >
    <option sid='15' value='test'>test</option>
    <option sid='15' value='test2'>test2</option>
    <option sid='16' value='plah'>plah</option>
    <option sid='16' value='plah2'>plah2</option>
</select>

Мне нужно получить все данные из select> опция>>
в var в следующей форме

 object = {
   '15':('test','test2'),
   '16':('plah','plah2')
}

Комментарии:

1. Этот формат недопустим. Я предполагаю, что вы хотите, чтобы [], а не () окружали значения.

Ответ №1:

Вы можете воспользоваться Array.reduce .

Логические

  • Выберите параметры select тега, выбрав выбрать из DOM. Я использовал document.getElementById . Вы можете использовать document.querySelector или любой другой механизм выбора.
  • Это повторится HTMLOptionsCollection . Вы можете преобразовать это в массив, используя Array.from
  • Используйте Array.reduce , чтобы сгруппировать это на основе sid
  • Я также использовал деструкцию объектов для доступа к атрибуту sid answell в качестве значения параметра.
 // Select the list options in the select
const options = document.getElementById('listOfOptions').options;

// Execute Array.reduce
const group = Array.from(options).reduce((acc, curr) => {
  // Destructuring the curr object to access the option value and sid value
  const { value, attributes: { sid: { value: sidValue } } } = curr;
  acc[sidValue] ? acc[sidValue].push(value) : acc[sidValue] = [value];
  return acc;
}, {});
console.log(group) 
 <select id='listOfOptions' >
  <option sid='15' value='test'>test</option>
  <option sid='15' value='test2'>test2</option>
  <option sid='16' value='plah'>plah</option>
  <option sid='16' value='plah2'>plah2</option>
</select>

Комментарии:

1. Подача готовых ответов с небольшим количеством объяснений менее полезна, чем более подробно объясненный ответ, особенно для новых участников, и особенно для таких простых вопросов по софтболу.

2. Я делаю такого рода комментарии ко всем ответам, как в оригинальной редакции. То есть ответы с кодом и небольшим объяснением. Во всяком случае, я с большей вероятностью прокомментирую, чем выше репутация, потому что люди с более высокой репутацией должны лучше знать, что чем больше объяснений, тем лучше.

3. Но я никогда не видел таких вещей для пользователей с более высокой репутацией. если вы делаете это действительно хорошо. Так держать.

Ответ №2:

Я бы использовал атрибут данных для sid , а затем повторил бы параметры и создал новый объект forEach .

 const options = document.querySelectorAll('#listOfOptions option');

const obj = {};

options.forEach(el => {

  // Grab the sid and value from the option element
  const { dataset: { sid }, value } = el;

  // If `sid` is not a key on the object
  // create it, and set the value to an empty array
  if (!obj[sid]) obj[sid] = [];

  // Push the value to the array
  obj[sid].push(value);

});

console.log(obj); 
 <select id="listOfOptions">
  <option data-sid="15" value="test">test</option>
  <option data-sid="15" value="test2">test2</option>
  <option data-sid="16" value="plah">plah</option>
  <option data-sid="16" value="plah2">plah2</option>
</select>

Дополнительная документация

Метки: