如果選擇了特定的選擇選項值，則顯示div

Question

如果用戶從選擇下拉列表中選擇特定選項值，我會嘗試顯示div。

例：

選擇下拉列表由從數據庫中提取的動態名稱以及列表底部名為“Admin”的一個靜態或永久名稱組成。

如果用戶選擇不是“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>

很高興得到這方面的幫助。

Answer 1

使用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上的演示。

Answer 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);"

看演示

Answer 3

嘗試這個：

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>

Answer 4

您可以在body load事件上附加change事件處理程序，並根據選擇隱藏/取消隱藏<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演示

Answer 5

嘗試

<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';
}

演示：小提琴

Answer 6

更改this.select來this ：

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

然后它應該工作正常。 如果你有jQuery你可以簡單地做：

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

將提供純JS功能。

Answer 7

<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option value="0">Admin</option>
</select>


<div id="admDivCheck" style="display:none;">
admin selected
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script>
$("#getFname").on("change",function(){"0"===$(this).val()?$("#admDivCheck").show():$("#admDivCheck").hide()});
</script>

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

如果選擇了特定的選擇選項值，則顯示div

問題描述

7 個解決方案

解決方案1
8 已采納 2013-05-23 11:43:59

解決方案2
2 2013-05-23 11:43:44

解決方案3
1 2013-05-23 11:45:17

解決方案4
1 2013-05-23 11:48:42

解決方案5
1 2013-05-23 11:50:08

解決方案6
0 2013-05-23 11:40:41

解決方案7
0 2018-10-31 11:45:01

如果選擇了特定的選擇選項值，則顯示div

問題描述

7 個解決方案

解決方案1 8 已采納 2013-05-23 11:43:59

解決方案2 2 2013-05-23 11:43:44

解決方案3 1 2013-05-23 11:45:17

解決方案4 1 2013-05-23 11:48:42

解決方案5 1 2013-05-23 11:50:08

解決方案6 0 2013-05-23 11:40:41

解決方案7 0 2018-10-31 11:45:01

解決方案1
8 已采納 2013-05-23 11:43:59

解決方案2
2 2013-05-23 11:43:44

解決方案3
1 2013-05-23 11:45:17

解決方案4
1 2013-05-23 11:48:42

解決方案5
1 2013-05-23 11:50:08

解決方案6
0 2013-05-23 11:40:41

解決方案7
0 2018-10-31 11:45:01