Question

我有一个简单的选择下拉菜单。

<select onchange="showDiv(this)">
      <option value="1">Container 01</option>
      <option value="2">Container 01 + 02</option>
      <option value="3">Container 01 + 02 + 03</option>
</select>

我有三个容器。如果我点击＆＃34;容器01 + 02＆＃34;上的选择区域，则应出现容器1和2。如果我点击＆＃34;容器01＆＃34;，则只显示容器01。

  <div id="container_01></div>
  <div id="container_02></div>
  <div id="container_03></div>

我找到了一种使用Jquery的方法：

function showDiv(select){
   if(select.value==1){
    document.getElementById('container_01').style.display = "block";
   } 
    else if (select.value==2){
    document.getElementById('container_01').style.display = "block";
    document.getElementById('container_02').style.display = "block";
   } 
    else if(select.value==3){
    document.getElementById('container_01').style.display = "block";
    document.getElementById('container_02').style.display = "block";
    document.getElementById('container_03').style.display = "block";
   }

这对我来说很好用！

现在我的问题：

为了使选择字段更具吸引力，我使用了一个非常好的脚本来提升选择。这是一个例子： https://tympanus.net/Development/SelectInspiration/index3.html

问题是，脚本将选择下拉菜单转换为列表元素：

<ul>
  <li class="" data-value="1"> <span>1</span> </li>
  <li class="cs-selected" data-value="2"> <span>2</span> </li>
  <li class="" data-value="3"> <span>3</span> </li>
</ul>

重建效果是否可以为选择菜单创建？从 li.cs-selected 获取数据值并显示：

<div id="container_01></div>
<div id="container_02></div>

我不擅长Javascript。也许有人可以帮我解决这个问题？谢谢！

Answer 1

你的目标是选择List元素的类，为此使用：

var elementSelected = document.getElementByClassName('your_class_name');

在elementSelected中存储引用后，将事件监听器应用为：

elementSelected.onClick = function(){ //Code goes here }

或者您可以使用addEventListener方法执行相同的操作：

elementSelected.addEventListener("click", function(e) {
    alert('something');
}, false);

单击元素后，您可以使用

获取其值

var elementValue = elementSelected.value

然后您可以将该值传输到您创建的“选择选项”下拉菜单中。

Answer 2

我不确定您是否拥有或可以使用jQuery，但您可以使用此脚本获取该值而无需选择。

// I would add a classname or an id to differentiate from other ul tags. 
$('ul.myMenuSelect').on('click', 'li', function(){
   var value = $(this).data('value');
   $(this).addClass('cs-selected').siblings().removeClass('cs-selected');
   $('#container_' + value).show().siblings().hide();
})

Answer 3

$("li.cs-selected").attr("data-value")

单击选择字段显示不同的容器

3 个答案: