Select2 库与自定义 js 代码冲突-解网

问：

我的代码有问题，我正在尝试使我的选择类别按出其中一个类别，根据客户选择的类别使用不同的选项进行另一个选择，我处理了代码，但合并了库 select2 以为选择提供样式，或者我选择第一个选择类别并且不起作用，并且代码显示另一个选择或将其保留为子类别，但是如果我设计第一个选择

用 www.DeepL.com/Translator 翻译（免费版）

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
    <title>filtro-test</title>
</head>
<body>
  <div class="container-filtro">
    <div class="filter-template">
        <select id="category-filter">
        <option value="" disabled selected>Elige una Categoria..</option>
          <option value="esferos">Esferos</option>
          <option value="promocionales">Promocionales</option>
          <option value="hogarplus">HogarPlus+</option>
          <option value="juguetes">Juguetes</option>
        </select>
      
        <div class="filter-subcategory esferos">
          <select id="esferos-filter">
            <option value="" disabled selected>Elige una Opcion...</option>
                    <option value="Esferos Publicitarios">Esferos Publicitarios</option>
                    <option value="Esferos Temáticos">Esferos Temáticos</option>
                    <option value="Esferos Ecológicos">Esferos Ecológicos</option>
                    <option value="Esferos de Alta Gama">Esferos de Alta Gama</option>
                    <option value="Resaltadores">Resaltadores</option>
                    <option value="Estuches Kits">Estuches Kits</option>
                    <option value="Lápices">Lápices</option>
          </select>
        </div>
      
        <div class="filter-subcategory promocionales">
          <select id="promocionales-filter">
            <option value="" disabled selected>Elige una Opcion...</option>
            <option value="Bioseguridad">Bioseguridad</option>
                    <option value="Bicicletas y Accesorios">Bicicletas y Accesorios</option>
                    <option value="Agendas">Agendas</option>
                    <option value="Alcancías">Alcancías</option>
                    <option value="Bolsas">Bolsas</option>
                    <option value="Botilitos">Botilitos</option>
                    <option value="Botones">Botones</option>
                    <option value="Cuidado Personal">Cuidado Personal</option>
                    <option value="Hogar">Hogar</option>
                    <option value="Mugs">Mugs</option>
                    <option value="Sombrillas">Sombrillas</option>
                    <option value="Morrales">Morrales</option>
                    <option value="Ecológicos">Ecológicos</option>
                    <option value="Relojes">Relojes</option>
                    <option value="Escolar">Escolar</option>
                    <option value="Oficina">Oficina</option>
                    <option value="Tecnología y Gadgets">Tecnología y Gadgets</option>
                    <option value="Gorras y Camisetas">Gorras y Camisetas</option>
                    <option value="Herramientas">Herramientas</option>
                    <option value="Identificación">Identificación</option>
                    <option value="Linternas y Lamparas">Linternas y Lamparas</option>
                    <option value="Llaveros">Llaveros</option>
                    <option value="Sublimación">Sublimación</option>
                    <option value="Maquinas">Maquinas</option>
                    <option value="Ofertas">Ofertas</option>
                    <option value="Colombia">Colombia</option>
                    <option value="USB">USB</option>
                    <option value="Laser">Laser</option>
                    <option value="Insumos">Insumos</option>
          </select>
        </div>

        <div class="filter-subcategory hogarplus">
            <select id="hogar-filter">
                <option value="" disabled selected>Elige una Opcion...</option>
                <option value="Cocina">Cocina</option>
                <option value="Hogar+ Hogar">Hogar + Hogar</option>
                <option value="Hogar + Cuidado Personal">Hogar + Cuidado Personal</option>
                <option value="Hogar+ Aseo">Hogar + Aseo</option>
                <option value="Hogar + Mascotas">Hogar + Mascotas</option>
                <option value="Hogar + Morrales">Hogar + Morrales</option>
                <option value="Hogar + Bicicletas">Hogar + Bicicletas</option>
                <option value="Hogar + Herramientas">Hogar + Herramientas</option>
                <option value="Hogar + Automóvil">Hogar + Automóvil</option>
                <option value="Hogar + Tecnología">Hogar + Tecnología</option>
                <option value="Hogar + Botilitos">Hogar + Botilitos</option>
            </select>
          </div>

          <div class="filter-subcategory juguetes"> 
            <select id="juguetes-filter">
                <option value="" disabled selected>Elige una Opcion...</option>
                <option value="Nacional">Nacional</option>
                <option value="Carros">Carros</option>
                <option value="Muñecas">Muñecas</option>
                <option value="Didácticos">Didácticos</option>
                <option value="Musicales">Musicales</option>
            </select>
          </div>

      </div>

      <div class="colores">
        <select name="colores" id="colores">
            <option value="" disabled selected>Elige un Color..</option>
            <option value="azul">Azul</option>
            <option value="rojo">Rojo</option>
            <option value="verde">Verde</option>
            <option value="Negro">Negro</option>
            <option value="Gris Oscuro">Gris Oscuro</option>
            <option value="Plata">Plata</option>
            <option value="Gris">Gris</option>
            <option value="Blanco">Blanco</option>
            <option value="Transparente">Transparente</option>
            <option value="Beige">Beige</option>
            <option value="Curuba">Curuba</option>
            <option value="Amarillo">Amarillo</option>
            <option value="Dorado">Dorado</option>
            <option value="naranja">Naranja</option>
            <option value="Bronce">Bronce</option>
            <option value="café">Café</option>
            <option value="Vinotinto">Vinotinto</option>
            <option value="Salmón">Salmón</option>
            <option value="Rosado">Rosado</option>
            <option value="fucsia">Fucsia</option>
            <option value="lila">Lila</option>
            <option value="morado">Morado</option>
            <option value="Azul Oscuro">Azul Oscuro</option>
            <option value="Azul Petroleo">Azul Petroleo</option>
            <option value="Azul Turquesa">Azul Turquesa</option>
            <option value="verde Turquesa">Verde Turquesa</option>
            <option value="Azul Claro">Azul Claro</option>
            <option value="verde claro">Verde Claro</option>
            <option value="verde oscuro">Verde Oscuro</option>
            <option value="madera">Madera</option>
            <option value="bambú">Bambú</option>
            <option value="fucsia claro">Fucsia Claro</option>
            <option value="Rosado fuerte">Rosado Fuerte</option>
            <option value="Terracota">Terracota</option>
            <option value="verde aguacate">Verde Aguacate</option>
            <option value="piel">Piel</option>
            <option value="Verde biche">Verde Biche</option>
            <option value="verde limon">Verde Limon</option>
            <option value="oro rosa">Oro Rosa</option>
            <option value="violeta claro">Violeta Claro</option>
            <option value="verde menta">Verde Menta</option>
            <option value="palo rosa">Palo Rosa</option>
            <option value="pastel">Pastel</option>
            <option value="cobre">Cobre</option>
            <option value="blanco - azul">Blanco - Azul</option>
            <option value="blanco - rojo">Blanco - Rojo</option>
            <option value="blanco - verde">Blanco - Verde</option>
            <option value="blanco - negro">Blanco - Negro</option>
            <option value="craft">Craft</option>
        </select>
    </div>
    <div class="btn-filtrar">
      <button>Filtrar</button>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
  <script src="/js/select-test.js"></script>
  <script src="/js/filtro-test.js"></script>


document.addEventListener('DOMContentLoaded', function() {
    const categoryFilter = document.getElementById('category-filter');
    const subcategories = document.querySelectorAll('.filter-subcategory');

    // Oculta todas las subcategorías al cargar la página
    subcategories.forEach(subcategory => {
      subcategory.style.display = 'none';
    });

    categoryFilter.addEventListener('change', function() {
      const selectedCategory = this.value;

      // Oculta todas las subcategorías
      subcategories.forEach(subcategory => {
        subcategory.style.display = 'none';
      });

      if (selectedCategory) {
        // Muestra la subcategoría correspondiente a la categoría seleccionada
        document.querySelector(`.filter-subcategory.${selectedCategory}`).style.display = 'block';
      }
    });
  });

$(document).ready(function() {
    $('#category-filter').select2({
        theme: 'classic',
        width: '300px',
    });
});


$(document).ready(function() {
    $('#colores').select2({
        theme: 'classic',
        width: '200px',
    });
});

$(document).ready(function() {
    $('#esferos-filter').select2({
        theme: 'classic',
        width: '200px',
    });
});


$(document).ready(function() {
    $('#promocionales-filter').select2({  
        theme: 'classic',
        width: '200px',
    });
});


$(document).ready(function() {
    $('#hogar-filter').select2({
        theme: 'classic',
        width: '200px',
    });
});

$(document).ready(function() {
    $('#juguetes-filter').select2({
        theme: 'classic',
        width: '200px',
    });
});

javascript html css 选择 jquery-select2

答： 暂无答案

上一个：远程源（AJAX） Select2 中的预选选项

下一个：Select2 在 Bootstrap Offcanvas 中格式不正确

Select2 库与自定义 js 代码冲突

Select2 Library Conflict with custom js code

评论