Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Multiple values in to the HTML <select> Tag

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/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had to install the plugin that allowed me to insert the custom JS to the page it self

    Here is the code

    jQuery(document).ready(function() {
// Add event listener to select
jQuery('#kategorijeSingle').change(function() {
// Hide elements with class usluge
jQuery('.usluge').hide();
if (jQuery(this).val() == "ALL"){
jQuery('.usluge').show();
}else{
// Show elements with selected class
jQuery('.' + jQuery(this).val()).show();
}
});
});

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search