How to separate and manipulate select data with js

Question

How to separate and manipulate select data with js

Navigation

#1 by (1 votes)

1

I have a forum with a select field that has many options to select, I would like to split those options by forum area by two select .

All areas and sub-areas are in a single select .

Example:

<div class="blockrow">
                <label for="destforumid">Fórum de Destino:</label>
                <select id="destforumid" name="destforumid" class="primary" tabindex="1">
    <option value="5" class="d0">Feedback (Categoria)</option>
    <option value="23" class="d0">Fórum de Estudos (Categoria)</option>
    <option value="7" class="d1">&nbsp; &nbsp; Anúncios e Enquetes</option>
    <option value="19" class="d1">&nbsp; &nbsp; Fale Conosco (Link)</option>

    <option value="10" class="d0">Designs (Categoria)</option>
    <option value="14" class="d2">&nbsp; &nbsp; &nbsp; &nbsp; Pedidos</option>
    <option value="29" class="d3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Atendidos (Sem Postagem)</option>
</select>

As far as I can see, d0 is the category, not forum. d1 is a forum of d0 above and when there is a d2 under d2 , it is a sub forum, that is, a forum within the d1 forum that is in the d0 category. / p>

If there are two d2 , it means that there are 2 forums in this category, very simple to understand. in the case of a d3 after a d2 , it means that the d2 previous that is a forum, will have another forum inside, which is d3 . And so on, there may be several d1 , d2 , d3 , d4 ...

Categories are split with each new d0 .

I would like to get all these values with js, where in the first, current select I would just select the categories I want, and in the second I would select the sub-category of that selected category that I want.

All select has a given, value , they are the ones that identify the selected location.

The second select would have to have the data id="destforumid" name="destforumid" class="primary" tabindex="1" because without that it might not work.

How could I have javascript automatically capture this data from select and organize it in the way described above by 2% with% so it would not be a huge list?

javascript html html-select

asked by anonymous 10.03.2018 / 23:59

1 answer

Remove "floating" non responsive div WELD-001408: Unsatisfied dependencies for type ServiceLocator with qualifiers @Default

score 1 · Accepted Answer

I think that's what you want. Go through the first select and put the second subcategories according to the selected category.

See:

$(document).ready(function(){

   $(".blockrow select")
   .attr({
      id: "primeiro",
      name: ""
   });

   $("#primeiro option[class!='d0']").hide(); // escondo tudo que não tiver a classe 'd0'
   
   $("<select>", {
      id: "destforumid",
      name: "destforumid",
      class: "primary",
      tabindex: "1"
   })
   .insertAfter("#primeiro");
   
   var cats = $("#primeiro option");
   
   $("#primeiro").on("change", function(){
      
      var opt = $(this)
                .find("option:selected")
                .nextUntil(".d0"),
          htm = '';

      if(opt.length == 0){
         htm = $(this)
               .find("option:selected")
               .clone();
      }else{
         $(opt).each(function(i,e){
            htm += e.outerHTML;
         });
      }

      $("#destforumid")
      .empty()
      .append(htm)
      .find("option")
      .show();

   }).trigger("change");
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="blockrow">
   <label for="destforumid">Fórum de Destino:</label>
   <select id="destforumid" name="destforumid" class="primary" tabindex="1">
      <option value="5" class="d0">Feedback (Categoria)</option>
      <option value="23" class="d0">Fórum de Estudos (Categoria)</option>
      <option value="7" class="d1">&nbsp; &nbsp; Anúncios e Enquetes</option>
      <option value="19" class="d1">&nbsp; &nbsp; Fale Conosco (Link)</option>

      <option value="10" class="d0">Designs (Categoria)</option>
      <option value="14" class="d2">&nbsp; &nbsp; &nbsp; &nbsp; Pedidos</option>
      <option value="29" class="d3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Atendidos (Sem Postagem)</option>
   </select>
</div>