Question

这是我在尝试的代码

迪维斯

<div id="showdiv16" style="display:none;">...</div>
<div id="showdiv17" style="display:none;">...</div>
<div id="showdiv18" style="display:none;">...</div>
<div id="showdiv19" style="display:none;">...</div>

现在我有一个下调的菜单从中取回价值16,17,18,19

和这个下降菜单上, 我呼唤改变的方法

<select name="category" id="category" onChange="showSelected(this.value);showSubcategory();" >

而我的JavaScript功能是...

<script type="text/javascript">
function showSelected( sapna )
{

    var myDivs = new Array(16,17,18,19); 
    for(var i=0; i<myDivs.length; i++) 
    {
        if(myDivs[i] == sapna)
        {
            var divtoshow =  showdiv +sapna;
            document.getElementById( showdiv +sapna).style.display = "block";
        }
        else
        {
            document.getElementById( showdiv +myDivs[i]).style.display = "none";
        }
    }

    return false;
}
</script>

让我知道怎样才能实现这个表演/隐藏的传播效果。

Answer 1

虽然jQuery 会容易得多,更清洁,但以下的纯JavaScript 中可以读到:

<html>
<head>
<title>test</title>
<style type="text/css">
    div{height:50px;width:200px;text-align:center;
        vertical-align:middle;border:1px dotted green;
        background-color:khaki;}
</style>
</head>
<body>
    <select id="test" onchange="showSelected(this.value)">
        <option value="-1" selected="selected">select</option>
        <option value="16">cat 16</option>
        <option value="17">cat 17</option>
        <option value="18">cat 18</option>
        <option value="19">cat 19</option>
    </select>

    <div id="showdiv16" style="display:none;">16</div>
    <div id="showdiv17" style="display:none;">17</div>
    <div id="showdiv18" style="display:none;">18</div>
    <div id="showdiv19" style="display:none;">19</div>

</body>
<script type="text/javascript">
    var myDivs = new Array(16, 17, 18, 19);

    function showSelected(sapna) {
        var t =  showdiv  + sapna,
            r, dv;
        for (var i = 0; i < myDivs.length; i++) {
            r =  showdiv  + myDivs[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display =  block ;
                } else {
                    dv.style.display =  none ;
                }
            }
        }
        return false;
    }
</script>
</html>

Answer 2

我知道这被贴上刺青标本, 而不是jQuery, 但是用jQuery来做这个是极其微不足道的, 所以这里举一个例子。

$( #category ).on( change click , function() {
    $( div ).hide();
    $( #showdiv  + this.value).show();
});

工作 jiddle: < a href=> http://jsfiddle.net/UBsp9/" rel="nofollow" > http://jsfidle.net/UBsp9/

Answer 3

我第一个猜想是,你试图将您选择的框中的字符串结果与您的 Divs 阵列中的整数进行比较。

以下是一些符合您原代码的香草js (尽管您可以用 JS lib 如jquery 来节省很多头痛,

function showSelected(sapna)
{
    var myDivs = new Array(16,17,18,19);
    for(var i=0; i<myDivs.length; i++)
    {
        document.getElementById( showdiv +myDivs[i]).style.display = (myDivs[i] == parseInt(sapna)) ?  block  :  none ;
    } // end for i in myDivs.length
} // end function showSelected

一个小提琴:http://jsfiddle.net/Wyedr/1/

Answer 4

如果您可以使用 jquery, 那么您就可以做类似的事情 :

<div id="showdiv16" class= targets  style="display:none;">Div 16</div>
<div id="showdiv17" class= targets  style="display:none;">Div 17</div>
<div id="showdiv18" class= targets  style="display:none;">Div 18</div>
<div id="showdiv19" class= targets  style="display:none;">Div 19</div>

<select name="category" id="category">
    <option value=  >Select</option>
    <option value= 16 >16</option>
    <option value= 17 >17</option>
    <option value= 18 >18</option>
    <option value= 19 >19</option>
</select>

在这里,这里的曲曲奏曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲曲

$(function(){
    $( #category ).change(function(){
        var divToShow = $(this).val();
        $( .targets ).hide();
        $( #showdiv  + divToShow ).show();
    });
})

您可以在此查看工作演示文稿 http://jsfidle.net/H9cvZ/35/

Answer 5

您也可以尝试这个

< a href=" "http://jsfiddle.net/maiirnoor84/5P2A5/" rel="nofollow" > 样本代码,请查看 JSFiddle

友情链接