通过点击选择字段显示不同的容器

我有一个简单的选择下拉菜单。通过点击选择字段显示不同的容器

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

我有三个容器。如果我点击“容器01 + 02”上的选择区域，应该出现容器1和2。如果我点击“容器01”，只会出现容器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选择并显示：

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

我不是在使用Javascript相当不错。也许有人可以帮助我解决这个问题？谢谢！

来源

2017-03-22 Filip

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

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

在存储参考在elementSelected将事件监听器：

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

或者你可以用addEventListener方法做同样的事情：

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

O NCE被点击的元素，您可以通过使用

var elementValue = elementSelected.value

然后你就可以说价值转移到“中选择选项”得到其数值下拉您创建菜单。

来源

2017-03-22 14:17:28

我不确定您是否有或可以使用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(); 
})

来源

2017-03-22 14:18:05

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

来源

2017-03-22 14:37:57 radeonxhl

通过点击选择字段显示不同的容器

回答

相关问题