How to separate and manipulate select data with js

Asked

Viewed 285 times

1

I have a forum with a field select which has many options to select, I would like to divide these options by forum area in 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>

From what I could see, d0 is the category, not the forum. d1 is a forum of d0 above and when there is a d2 below the d2, is a sub-forum, that is, a forum within the forum d1 who is in the category d0.

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

Categories are divided with each new d0.

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

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

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

How could I get javascript to automatically capture this data from select and organised in the manner described in 2 select so that there wouldn’t be a huge list?

javascript html html-select

  • Note: I left select with few options, sufficient for example and understanding, but in the forum are hundreds if areas, so the division would facilitate and much.

  • The first would not be the same, I forgot to put in question this detail, the first would serve only for the categories, the second is what I would actually select. In the case of select Feedback (Categoria), it has no sub-forum, would have to repeat it in the second select.

  • The first would be only with the categories, only the d0, the second with the selected d0 sub-areas, ranging from the d0 until the next.

  • It doesn’t matter much how it is, since when selected a category, the second select lists the subforums belonging to it, and then choose in the second select.

  • A function could remove the existing select, once it has taken the data, then create the first select of the categories, and the second one with the id we want. Wouldn’t that work? @dvd

  • If it is not harmful to the display of the subareas it can be yes, in case it gets in the way, any name can be used, because for vbulletin what will import is the id="destforumid" name="destforumid" that will be in the second select.

  • 1

    Blz, I’m gonna do it here and when I get it we see.

  • 1

    Another question: can be with jQuery?

  • 1

    It can be whatever you want it to be :)

  • You can repeat it, that is, it would be its own value in the second select.

Show 5 more comments

1 answer

1


I think that’s what you want. Scroll through the first select and place the subcategories in the second according to the selected category.

Behold:

$(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>
<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>
</div>

  • This second select would have to be inserted into the html code, since these changes can only be made via javascript and not in the page code itself. The page is loaded with a single menu, and javascript should perform these changes, would you be able to update this code to do that? I could not here because the second menu does not exist.

  • Updated response.

  • It didn’t work out, the data is dynamic, so the <select id="primeiro"... cannot have these default values. The menu is loaded as demonstrated in the question, in html, all that we will modify in the page must be in javascript, because I cannot insert anything predefined in it as a second select, everything must be done with javascript. I don’t know if I was clear, please tell me if you have any questions.

  • The above js code thinks there is this id="primeiro" html, but it doesn’t, unless we put it via javascript, what comes in html is the default menu as I showed in the question, I think the problem is this.

  • 1

    I had not attempted it... I changed the answer

  • Perfect, this update you made is functional. :)

Show 1 more comment

Browser other questions tagged javascript html html-select

You are not signed in. Login or sign up in order to post.