Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap 5.3 tablist inside <select> <option> not working on other browser except latest firefox

I have the following codes not working correctly except Mozilla Firefox browser. I’m using Bootstrap 5.3. Anyone can help me for a working tablist with select option?

Here is my codes not working in google chrome and other browser except firefox.

<div class="select-dropdown">
  <select id="bTransaction" role="tablist">
    <option class="active" id="business1-tab" data-bs-toggle="tab" data-bs-target="#business1" role="tab" aria-controls="business1" aria-selected="true">Business 1</option>
    <option id="business2-tab" data-bs-toggle="tab" data-bs-target="#business2" role="tab" aria-controls="business2" aria-selected="false">Business 2</option>
    <option id="business3-tab" data-bs-toggle="tab" data-bs-target="#business3" role="tab" aria-controls="business3" aria-selected="false">Business 3</option>
  </select>
</div>
<div class="tab-content" id="bTransactionContent">
  <div class="tab-pane fade show active" id="business1" role="tabpane" aria-labelledby="business1-tab">
    Business 1 Content
  </div>
  <div class="tab-pane fade" id="business2" role="tabpane" aria-labelledby="business2-tab">
    Business 2 Content
  </div>
  <div class="tab-pane fade" id="business3" role="tabpane" aria-labelledby="business3-tab">
    Business 3 Content
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here I've found a solution-

              document.addEventListener("DOMContentLoaded", function() {
        const selectDropdown = document.querySelector('.select-dropdown select');
        const tabContent = document.getElementById('bTransactionContent');

        selectDropdown.addEventListener('change', function() {
          const selectedOption = selectDropdown.options[selectDropdown.selectedIndex];
          const targetTabId = selectedOption.getAttribute('data-bs-target');
          const targetTab = document.querySelector(targetTabId);

          // Hide all tab panes
          tabContent.querySelectorAll('.tab-pane').forEach(tabPane => {
            tabPane.classList.remove('show', 'active');
          });

          // Show the selected tab pane
          targetTab.classList.add('show', 'active');
        });
      });
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5.3</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>


    <div class="select-dropdown">
      <select id="bTransaction" role="tablist">
        <option class="active" id="business1-tab" data-bs-toggle="tab" data-bs-target="#business1" role="tab" aria-controls="business1" aria-selected="true">Business 1</option>
        <option id="business2-tab" data-bs-toggle="tab" data-bs-target="#business2" role="tab" aria-controls="business2" aria-selected="false">Business 2</option>
        <option id="business3-tab" data-bs-toggle="tab" data-bs-target="#business3" role="tab" aria-controls="business3" aria-selected="false">Business 3</option>
      </select>
    </div>
    <div class="tab-content" id="bTransactionContent">
      <div class="tab-pane fade show active" id="business1" role="tabpane" aria-labelledby="business1-tab">
        Business 1 Content
      </div>
      <div class="tab-pane fade" id="business2" role="tabpane" aria-labelledby="business2-tab">
        Business 2 Content
      </div>
      <div class="tab-pane fade" id="business3" role="tabpane" aria-labelledby="business3-tab">
        Business 3 Content
      </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>


  2. 0

    try to ad dropdown without bootsrtap attributes for tab switching , add event listener to the select dropdown and hide all tab panes and then show the selected tab : if (selectedTab){
    selcetedTab.classList.add(‘show’,’active’);
    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search