如果选择了特定的选择选项值,则显示div

时间:2013-05-23 11:37:50

标签: javascript

如果用户从选择下拉列表中选择特定选项值,我会尝试显示div。

示例:

选择下拉列表包含从数据库中提取的动态名称,以及名为“Admin”的列表底部的一个静态或永久名称

如果用户选择的选项不是“Admin”,则如果用户选择div“保持隐藏”,则会显示包含特定表单元素的div

这是我的代码:

Javascript -

<script language="javascript">

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

</script>

HTML -

<select id="getFname" onchange="admSelectCheck(this.select);">
<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
</div>

很高兴能得到这方面的帮助。

7 个答案:

答案 0 :(得分:8)

使用this.select不正确。

这是正确的代码:

<强> HTML

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

<强> JS

function admSelectCheck(nameSelect)
{
    console.log(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";
    }
}

请参阅JSFiddle上的演示。

答案 1 :(得分:2)

我认为你需要这样

只需更改此行:

<强> JS

admOptionValue = document.getElementById("getFname").value;
//alert(admOptionValue);

if(admOptionValue == 0){
     document.getElementById("admDivCheck").style.display = "";
}
else{
     document.getElementById("admDivCheck").style.display = "none";
 }

还有 HTML

onchange="admSelectCheck(this);"

see Demo

答案 2 :(得分:1)

试试这个:

JS:

function admSelectCheck(nameSelect)
{
    if(nameSelect){
        admOptionValue = nameSelect.value;
        if(admOptionValue != 0){
            nameSelect.style.display = "";
        }
        else{
            nameSelect.style.display = "none";
        }
    }
    else{
        nameSelect.style.display = "none";
    }
}

HTML:

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

答案 3 :(得分:1)

您可以在正文加载事件上附加更改事件处理程序,并根据选择隐藏/取消隐藏<div>

HTML

<select id="getFname">
  <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
</div>

将以下代码放在Head标记中:

<script type="text/javascript">

function onload() {
   document.getElementById("getFname").onchange = function (e) {
   if (this.value == 0) {
     document.getElementById("admDivCheck").style.display="";
   } else {
     document.getElementById("admDivCheck").style.display="none";
  }
 };

}

</script>

调用body中的onload函数:

<body onload="onload()">

jsfiddle demo

答案 4 :(得分:1)

尝试

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

function admSelectCheck(nameSelect)
{
    var val = nameSelect.options[nameSelect.selectedIndex].value;
    document.getElementById("admDivCheck").style.display = val == '0' ? "block" : 'none';
}

演示:Fiddle

答案 5 :(得分:0)

this.select更改为this

 <select id="getFname" onchange="admSelectCheck(this);">

然后它应该可以正常工作。如果你有jQuery,你也可以这样做:

$("#getFname").change(function() {
   var val = $(this).text();
   if (val != "Admin") {
      $("#div").show();
   }
});

也将提供纯JS功能。

答案 6 :(得分:0)

    YAxis orderRightYAxis = orderChart.getAxisRight();
    YAxis orderLeftAxis = orderChart.getAxisLeft();
    orderLeftAxis.setDrawGridLines(false);
    orderRightYAxis.setEnabled(false);

    grossChart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_RIGHT);

    grossChart.invalidate();
    grossChart.setVisibleXRangeMaximum(7);
}

演示https://jsfiddle.net/kingtaherkings/swzmxkej/