jquery - Multiple values in to the HTML <select> Tag

Question

I am trying to show and hide Elementor sections with a

jQuery(function() {
   jQuery('#kategorije').change(function(){
      jQuery('.usluge).hide();
      jQuery('#' + jQuery(this).val()).show();
    });
});

I was wondering is it possible to add multiple selection into the HTML Tag

<Select id="kategorije">
 <option value="web"; "web2";"web3">Websajt</option>

Screenshots

the code CSS ID and CSS classes

http://propersoft.rs/about/

question from:https://stackoverflow.com/questions/65648613/multiple-values-in-to-the-html-select-tag

Answer 1

The example below will start with all items hidden (using a CSS class), and then show one after being selected. Change the selected option will hide the previous and show the newly selected one. You can apply the class to multiple elements.

If you really want to use ; separated id then I have created a second select demo where the value of the select option is split and then this array is cycled through, showing each element in turn.

The code is fully commented.

Let me know if this wasn't what you wanted.

---

// Add event listener to select
$('#kategorijeSingle').change(function() {

  // Hide elements with class usluge
  $('.usluge').hide();

  // Show elements with selected class
  $('.' + $(this).val()).show();

  // If you just want a single div to be shown using the id then uncomment the line below
  // $('#' + jQuery(this).val()).show();

});

// Add event listener to select for ID
$('#kategorijeID').change(function() {

  // Hide elements with class usluge
  $('.uslugeID').hide();

  // Get IDs, split by ;
  ids = $(this).val().split(";");

// Cycle through each ID and show
  ids.forEach(function(id) {
    $('#' + id).show();
  })

});

.usluge,
.uslugeID {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="kategorijeSingle">
  <option value="web1">Websajt 1</option>
  <option value="web2">Websajt 2</option>
  <option value="web3">Websajt 3</option>
</select>

<div id="web1" class="usluge web1">
  web1
</div>
<div id="web1second" class="usluge web1">
  web1 second
</div>
<div id="web2" class="usluge web2">
  web2
</div>
<div id="web3" class="usluge web3">
  web3
</div>

<hr>

<select id="kategorijeID">
  <option value="webID1">Websajt 1</option>
  <option value="webID2">Websajt 2</option>
  <option value="webID3">Websajt 3</option>
  <option value="webID1;webID3">Websajt 1 and 3</option>
</select>

<div id="webID1" class="uslugeID">
  web1
</div>
<div id="webID2" class="uslugeID">
  web2
</div>
<div id="webID3" class="uslugeID">
  web3
</div>