當選擇選項時javascript顯示隱藏的div

好的我一直在尋找這個答案，但我碰到的一切（即使在搜索javascript時）都會出現jQuery！沒有人使用普通的JavaScript了嗎？！？當選擇選項時javascript顯示隱藏的div

所以我想要的，我有一個下拉列表（選擇一些選項）。當選擇某個選項時，我想要顯示一個隱藏的div。

<select id="test" name="form_select"> 
    <option value="0">No</option> 
    <option value ="1" onClick"showDiv()">Yes</option> 
</select> 
<div id="hidden_div" style="display: none;">Hello hidden content</div>

然後我用這段JavaScript代碼嘗試它：

function showDiv(){ 
    document.getElementById('hidden_div').style.display = "block"; 
}

我猜我的問題是在我的選項的onClick觸發，但我在使用還有什麼不清楚？或者，我可以用這一個完全脫落（！注意自我獲得良好的JavaScript書）

來源

2013-04-15 twigg

試試這個：

<select id="test" name="form_select" onchange="showDiv(this)"> 
    <option value="0">No</option> 
    <option value ="1">Yes</option> 
</select> 

function showDiv(elem){ 
    if(elem.value == 1) 
     document.getElementById('hidden_div').style.display = "block"; 
}

來源

2013-04-15 13:07:48

這是一個好主意，叫'showDiv（）'函數當頁面第一次加載爲好。用戶可能正在重新加載之前選擇了「是」選項的頁面。 – Annabel

@Matei Mihai你好，如果我們有更多的選項我們想禁用div呢？就像我們有3個選項，選擇其中的2個將會禁用div。希望你提前回復謝謝。 –

嘗試處理select的變化情況，並使用this.value，以確定它是否是「是否。

jsFiddle

document.getElementById('test').addEventListener('change', function() { 
    var style = this.value == 1 ? 'block' : 'none'; 
    document.getElementById('hidden_div').style.display = style; 
});

HTML

<select id="test" name="form_select"> 
    <option value="0">No</option> 
    <option value ="1">Yes</option> 
</select> 

<div id="hidden_div" style="display: none;">Hello hidden content</div>

來源

2013-04-15 13:10:07

你應該鉤住<select>元素的變化情況，而不是對個人的選擇。

var select = document.getElementById('test'), 
onChange = function(event) { 
    var shown = this.options[this.selectedIndex].value == 1; 

    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none'; 
}; 

// attach event handler 
if (window.addEventListener) { 
    select.addEventListener('change', onChange, false); 
} else { 
    // of course, IE < 9 needs special treatment 
    select.attachEvent('onchange', function() { 
     onChange.apply(select, arguments); 
    }); 
}

Demo

來源

2013-04-15 13:17:14

我認爲這是適當的：

<select id="test" name="form_select" onchange="showDiv(this)"> 
    <option value="0">No</option> 
    <option value="1">Yes</option> 
</select> 
<div id="hidden_div" style="display:none;">Hello hidden content</div> 

<script type="text/javascript"> 
function showDiv(select){ 
    if(select.value==1){ 
    document.getElementById('hidden_div').style.display = "block"; 
    } else{ 
    document.getElementById('hidden_div').style.display = "none"; 
    } 
} 
</script>

試試這個，這將很好地工作。感謝

來源

2016-08-02 09:31:06

-1

採取看看我的解決方案

我要讓visaCard-note DIV可見只有選擇cardType是visa

這裏是HTML

<select name="cardType"> 
    <option value="1">visa</option> 
    <option value="2">mastercard</option> 
</select>

這裏是JS

var visa="1";//visa is selected by default 
$("select[name=cardType]").change(function() { 
    document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden'; 
})

來源

2017-03-16 17:23:28

檢查此代碼。它使用選擇項隱藏div真棒代碼。

HTML

<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" > 
    <option value="1">YES</option> 
    <option value="2">NO</option> 
</select> 

<div id="div1" style="display:block;"> 
    <input type="text" id="customerName" class="form-control" placeholder="Type Customer Name..."> 
    <input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address..."> 
    <input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile..."> 
</div> 
<div id="div2" style="display:none;"> 
    <input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name..."> 
    <datalist id="cars"> 
     <option>Value 1</option> 
     <option>Value 2</option> 
     <option>Value 3</option> 
     <option>Value 4</option> 
    </datalist> 
</div>

<script> 
    function showDiv(prefix,chooser) 
    { 
      for(var i=0;i<chooser.options.length;i++) 
      { 
       var div = document.getElementById(prefix+chooser.options[i].value); 
       div.style.display = 'none'; 
      } 

      var selectedOption = (chooser.options[chooser.selectedIndex].value); 

      if(selectedOption == "1") 
      { 
       displayDiv(prefix,"1"); 
      } 
      if(selectedOption == "2") 
      { 
       displayDiv(prefix,"2"); 
      } 
    } 

    function displayDiv(prefix,suffix) 
    { 
      var div = document.getElementById(prefix+suffix); 
      div.style.display = 'block'; 
    } 
</script>

來源

2017-03-21 11:29:16

當選擇選項時javascript顯示隱藏的div

回答

相關問題