create Javascript function for multiple ids

Question

$(document).ready(function() {

  $('div#bloqueioSelect').click(function() {

    if ($('div#bloqueioSelect ul').is(':visible')) {
      $('div#bloqueioSelect ul').css('display', 'none');
      $('div#bloqueioSelect div img').prop('src', 'imgs/setaBaixo.jpg');
    } else {
      $('div#bloqueioSelect ul').css('display', 'block');
      $('div#bloqueioSelect div img').prop('src', 'imgs/setaCima.jpg');
    }

  });

  $('div#bloqueioSelect ul li').click(function() {
    $('input[type=hidden]#bloqueio').val($(this).val());
  });

});

* {
  margin: 0;
  padding: 0;
  border: 0;
}

div.selecao {
  position: relative;
  border: 1px #CCCCCC solid;
}

div.selecao div {
  height: 30px;
  text-align: center;
  cursor: pointer;
}

div.selecao div,
div.selecao ul {
  display: block;
  width: 100%;
  background-color: #F8F8F8;
}

div.selecao div * {
  display: inline-block;
  vertical-align: top;
}

div.selecao div label {
  width: calc(100% - 30px);
  height: 30px;
  line-height: 30px;
}

div.selecao ul {
  position: absolute;
  left: -1px;
  /*Menos 1 pixel da borda*/
  top: 30px;
  display: none;
  border: 1px #CCCCCC solid;
}

div.selecao ul li:not(:first-child) {
  border-top: 1px #CCCCCC solid;
}

div.selecao ul li {
  display: block;
  width: 100%;
  height: 30px;
  cursor: pointer;
  text-align: center;
}

div.selecao ul li:hover {
  background-color: #CCCCCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=hidden value='' name=bloqueio id=bloqueio />

<div class=selecao style='width: 150px;' id=bloqueioSelect>
  <div><label>Bloqueio</label><img src="imgs/setaBaixo.jpg" /></div>
  <ul>
    <li value=1><img src="imgs/bloquear.png" title="Produto Bloqueado" /></li>
    <!--
		-->
    <li value=0><img src="imgs/desbloquear.png" title="Produto Desbloqueado" /></li>
  </ul>
</div>

I have this code who stylized a select.

In that code there is a Javascript for popular one input Hidden

I wonder if there is a way to generalize this function in such a way that I do not need to make a call if I create several id’s for the selects.

Example: this code will only work for the id=lockSelect.

If I have another select, for example: id=citySelect, won’t work.

Or is there some resource without the need to make the call in the field itself?

<div class=selecao style='width: 150px;' id=bloqueioSelect  onclick='funcao();'>

That’s what I was trying to avoid

Answer 1

You can use class instead of adding id for each element. The class can be used several times on the page.

Knowing where the click was you can navigate through the elements until you find what you need, for example at $(this).parents('.customSelect').find("input").val($(this).val());, this line searches inside the parents of the clicked element, one with class customSelect and then tries to find an input inside this element, thus locating the hidden input and setting the value.

Basically there is a way to generalize, just use classes and navigate the elements based on the element clicked to identify which corresponding element you want to change.

NOTE: Use quotation marks in the html attributes, although it is not mandatory, it avoids many problems with outdated browsers. OBS2: There are problems with css, stay on your own.

$(document).ready(function() {

  $('.customSelect').click(function() {

    if ($(this).find('ul').is(':visible')) {
        $(this).find('ul').css('display', 'none');
        $(this).find('div img').prop('src', 'imgs/setaBaixo.jpg');
    } else {
        $(this).find('ul').css('display', 'block');
        $(this).find('div img').prop('src', 'imgs/setaCima.jpg');
    }

  });

  $('.customSelect ul li').click(function() {
    //Seta o procura pelo input dentro do parent com a class "customSelect"
    $(this).parents('.customSelect').find("input").val($(this).val());
  });

});

* {
  margin: 0;
  padding: 0;
  border: 0;
}

div.selecao {
  position: relative;
  border: 1px #CCCCCC solid;
}

div.selecao div {
  height: 30px;
  text-align: center;
  cursor: pointer;
}

div.selecao div,
div.selecao ul {
  display: block;
  width: 100%;
  background-color: #F8F8F8;
}

div.selecao div * {
  display: inline-block;
  vertical-align: top;
}

div.selecao div label {
  width: calc(100% - 30px);
  height: 30px;
  line-height: 30px;
}

div.selecao ul {
  position: absolute;
  left: -1px;
  /*Menos 1 pixel da borda*/
  top: 30px;
  display: none;
  border: 1px #CCCCCC solid;
}

div.selecao ul li:not(:first-child) {
  border-top: 1px #CCCCCC solid;
}

div.selecao ul li {
  display: block;
  width: 100%;
  height: 30px;
  cursor: pointer;
  text-align: center;
}

div.selecao ul li:hover {
  background-color: #CCCCCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="selecao customSelect" style='width: 150px;' id=bloqueioSelect>
  <input type=hidden value='' name=bloqueio id=bloqueio />
  <div><label>Bloqueio</label><img src="imgs/setaBaixo.jpg" /></div>
  <ul>
    <li value=1><img src="imgs/bloquear.png" title="Produto Bloqueado" /></li>
    <!--
		-->
    <li value=0><img src="imgs/desbloquear.png" title="Produto Desbloqueado" /></li>
  </ul>
</div>
<br>
<div class="selecao customSelect" style='width: 150px;' id=cidadeSelect>
  <input type=hidden value='' name=cidade id=cidade />
  <div><label>Bloqueio</label><img src="imgs/setaBaixo.jpg" /></div>
  <ul>
    <li value=1><img src="imgs/bloquear.png" title="Produto Bloqueado" /></li>
    <!--
		-->
    <li value=0><img src="imgs/desbloquear.png" title="Produto Desbloqueado" /></li>
  </ul>
</div>