Question

0

115

Views

How do I put the options that contain a class on the very beginning of options

I am making a option that have list of video that has audio and the video that has both audio and video

I have added a class to the videos that have audio and video both and I want them to be at the very beginning of the list

My Current code

<select id="download-options" class="select_download">
  <option value="140">mp4 (only audio)</option>
  <option value="137">mp4 - 1080p (no audio)</option>
  <option value="160">mp4 - 144p (no audio)</option>
  <option value="133">mp4 - 240p (no audio)</option>
  <option value="18" class="has_video">mp4 - 360p</option>
  <option value="134">mp4 - 360p (no audio)</option>
  <option value="135">mp4 - 480p (no audio)</option>
  <option value="22" class="has_video">mp4 - 720p</option>
  <option value="136">mp4 - 720p (no audio)</option>
</select>

And I want it to be like this

<select id="download-options" class="select_download">
  <option value="18" class="has_video">mp4 - 360p</option>
  <option value="22" class="has_video">mp4 - 720p</option>
  <option value="140">mp4 (only audio)</option>
  <option value="137">mp4 - 1080p (no audio)</option>
  <option value="160">mp4 - 144p (no audio)</option>
  <option value="133">mp4 - 240p (no audio)</option>
  <option value="134">mp4 - 360p (no audio)</option>
  <option value="135">mp4 - 480p (no audio)</option>
  <option value="136">mp4 - 720p (no audio)</option>
</select>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T03:15:34.744Z

Just check the options for the absence of class, and if absent, move those to the back:

const list = document.getElementById('download-options');
for (const option of [...list.options]) {
    if (!option.className) list.add(option);
}
list.selectedIndex = 0;

<select id="download-options" class="select_download">
  <option value="140">mp4 (only audio)</option>
  <option value="137">mp4 - 1080p (no audio)</option>
  <option value="160">mp4 - 144p (no audio)</option>
  <option value="133">mp4 - 240p (no audio)</option>
  <option value="18" class="has_video">mp4 - 360p</option>
  <option value="134">mp4 - 360p (no audio)</option>
  <option value="135">mp4 - 480p (no audio)</option>
  <option value="22" class="has_video">mp4 - 720p</option>
  <option value="136">mp4 - 720p (no audio)</option>
</select>

0

115

How do I put the options that contain a class on the very beginning of options

1 answers

0

Find remote jobs

Andres GPT