Capture a specific option in Javascript

Asked

Viewed 55 times

1

The System:

I have a select with some options and sub-options (I already explain). This select is generated by php according to the categories that are registered in the database, that is, I have the CATEGORY 01 but in this category I register a subcategory, so it’s like Subcategory 01, if I register in that subcategory another subcategory, it looks like Sub-category 01 and so infinitely.

In the generation of HTML, select, they all come as option (not nested inside each other as in UL > LI > UL > LI, etc).

Select looks like this:

<select id="selecao">
    <option value="cat1">Eletronicos</option>
        <option value="sec1">Informática</option>
            <option value="prod1">Monitores</option>
            <option value="prod2">Gabinetes</option>
    <option value="cat2">CATEGORIA 02</option>
</select>

I need to capture the value of the product category, that is, if I click on option Monitors my variable in javascript will capture the value of the product category (are those marked as cat1 and cat2)

EDIT:

Structure of the database:

In the bank I have a table that used the categories, each category has an id, a parent_id and a Depth

parent_id tells which parent category it is associated with and Depth tells which category level

  • Electronic has parent_id = null and Depth = 0
  • Informatics is subcategory of Electronics so it has parent_id = 1 (pq id of Electronics in the database is 1) and Depth = 1
  • Monitors is a subcategory of the Informatics subcategory and therefore has parent_id = 10 (because the Informatics id in the database is 10) and Depth = 2

This is the idea of relationship of the categories in the table.

I thank all who can help.

I did not find similar question that helps solve this problem, if you know of any that will help me, check here. Thanks

javascript html
  • 1

    What if the guy selects "Electronics" or "Informatics"?

  • 1

    Lougans, in this form in which all are in the same select will be considered as being "brothers" without different levels of kinship. How’s your structure at the bank? and a suggestion: that such break into several selects, depending on the selected parent category it displays another select child (if any) associated that parent?

  • @Sam, The same thing. The main categories are presented in Uppercase and the subcategory in normal way. This spacing is how it appears in the rendering of html on account of &nbsp; I want to see a way to do this if you have it of course. It is to avoid having to change all the code that has already been written by someone else hehe...

  • 1

    So regardless of the option checked, you want to catch cat1, cat2 etc..?

  • @Sam the idea is to record in a variable of javascript the value of the main categories cat1, cat2. That’s right. If I click on Computer or monitors or any other that is within the "nesting" of the main category, it will capture the cat1

  • @Matheuscristian I edited my question asking how is the structure and relationships, see if I made sense kkkk

  • 1

    Oh yes, I understand better. If you just want to take the category name, how about you put it in the value itself, instead of "prod1" or "prod2" the "cat1" only? put the category itself into value

  • @Matheuscristian this will all come dynamically, right? I gave example with name of categories to exemplify here, but of course the value of these categories will be a number, an id that will reference there in the database, but I want to capture by javascript, rsrs... Unfortunately this code was not made by me initially and wanted to solve it in the current structure of the code (otherwise I will have to change a lot of things), if it is not possible :/

  • 1

    But the values will always be like this in this pattern: cat1, sec1, prod1, prod2, cat2 etc...?

  • @Sam I said in the comment there to Matheus that I only put these names by example, hehe.. The value will be all numbers without differentiation between them, only an auto-increment value.

Show 5 more comments

1 answer

1


Without tampering with HTML you can’t do that, because you don’t have any reference to know that one option is related to another, because they’re all sibling elements. You would solve this by placing only one class in the option that represents a category, for example:

<select>
   <option class="cats" value="123">CATEGORIA 1</option>
   ... options da cat1
   <option class="cats" value="456">CATEGORIA 2</option>
   ... options da cat2
</select>

With this class it is very easy to catch the value with Javascript, doing a reverse loop. Just take the index of the selected option and go back to the first previous option that has the class .cats:

document.getElementById("selecao").onchange = function(){
   var idx = this.selectedIndex;
   if(this.className != "cats"){
      
      for(var x = idx; x > -1; x--){
   
         var opt = this.querySelectorAll("option")[x];
   
         if(opt.className == "cats"){
            var categoria = opt.value;
            break;
         }
         
      }
      
   }else{
      
      var categoria = this.value;
      
   }

   console.log(categoria);
}
<select id="selecao">
    <option class="cats" value="cat1">Eletronicos</option>
        <option value="sec1">Informática</option>
            <option value="prod1">Monitores</option>
            <option value="prod2">Gabinetes</option>
    <option class="cats" value="cat2">CATEGORIA 02</option>
        <option value="sec2">Informática</option>
            <option value="prod3">Monitores2</option>
            <option value="prod4">Gabinetes2</option>
</select>

  • Fantastic, it worked. It took me a little while to understand all the parts of the function but it worked. I made a few changes just and solved the problem. Thanks Muuito Sam. ^^

  • I forgot to put the code description, but it is very easy to understand. Valew!

  • Yes, very easy ^^

  • if you can see about this problem of mine here too, Click here

Browser other questions tagged javascript html

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