HTML <select> 标签中的多个值

Question

我正在尝试使用

显示和隐藏 Elementor 部分

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

我想知道是否可以在 HTML 标签中添加多项选择

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

截图

the code CSS ID and CSS classes

http://propersoft.rs/about/

Answer 1

下面的示例将从隐藏的所有项目开始（使用 CSS class），然后在 selected 后显示一个。更改 selected 选项将隐藏前一个并显示新的 selected 选项。您可以将 class 应用于多个元素。

如果你真的想用； separated id 然后我创建了第二个 select 演示，其中 select 选项的值被拆分，然后循环遍历该数组，依次显示每个元素。

代码已完整注释。

如果这不是您想要的，请告诉我。

// 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>

Answer 2

我必须安装允许我将自定义 JS 插入到它自己的页面的插件

这是代码

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();
}
});
});

HTML <select> 标签中的多个值

Multiple values in to the HTML <select> Tag

wordpress

jquery

elementor