Question

我正在尝试创建一个切换，display:block和display:none用于不同的代码块，类似于lob.com旁边的代码框“ 一个直观的RESTful API“。

我一直试图让这个工作基于jsfiddle，但我无法让它工作但我不确定这个代码是否是我需要实现在lob.com上完成的工作

<select id="getFname" onchange="admSelectCheck(this);">
    <option value="1">Jay</option>
    <option value="4">Sam</option>
    <option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
    admin selected

JavaScript的：

function admSelectCheck(nameSelect)
{
    if(nameSelect){
        admOptionValue = document.getElementById("admOption").value;
        if(admOptionValue == nameSelect.value){
            document.getElementById("admDivCheck").style.display = "block";
        }
        else{
            document.getElementById("admDivCheck").style.display = "none";
        }
    }
    else{
        document.getElementById("admDivCheck").style.display = "none";
    }
}

最终它需要能够像在lob.com上那样在两个下拉之间切换，这样如果左边有4个选项，那么将会有8组div，然后是右边的2个。

有人能指出我正确的方向来学习如何做到这一点，因为我不确定我是否应该使用JQuery。基本上我想知道lob.com究竟是怎么做的，所以我可以走正确的道路！

谢谢，如果有人能指出我。

Answer 1

网站lob.com正在容器内建立了很多pre个。从HTML开始：

<pre class="jayOption prettyprint" style="display: none;"><code>Jay</code></pre>
<pre class="samOption prettyprint" style="display: none;"><code>Sam</code></pre>
<pre class="admOption prettyprint" style="display: none;"><code>Admin</code></pre>

添加您的选择框：

<select id="getFname" onchange="admSelectCheck(this);">
    <option value="jayOption">Jay</option>
    <option value="samOption">Sam</option>
    <option value="admOption">Admin</option>
</select>

我们可以使用以下代码切换<pre>元素：

function admSelectCheck(nameSelect)
    if(nameSelect.value){
        var preElements = document.getElementsByClassName('prettyprint');
        for(var i=0; i < preElements.length; i++){  
            //if the class contains the selected value, then show it, else hide it
            preElements[i].style.display = preElements[i].classList.contains(nameSelect.value)?'block':'none';
        }
    }
}

利用classList

fiddle

Answer 2

您无法隐藏下拉列表中的元素。请尝试将其设置为“已禁用”属性。要么，要么动态地重新创建列表。

Answer 3

我分叉你的jsfiddle以举例说明如何使用div上的命名约定来实现这一点，如

<div id="admDivCheck0" style="display:none;">

对应

中的值

<option id="admOption" value="0">Admin</option>

http://jsfiddle.net/v7Rmh/这里是小提琴：D

显示块和显示无选项值

3 个答案:

fiddle