Javascript：使其一個文本框顯示，如果一個下拉選項中選擇

這裏是什麼，我試圖完成的截圖： enter image description here Javascript：使其一個文本框顯示，如果一個下拉選項中選擇

基本上，如果用戶選擇「SFTP」，應顯示一個文本框。

這裏是我的代碼：

<strong class="heading">Image Hosting</strong> 
<div id="imagehosting"> 
    <form name="test"> 
     Does the client require our company to host their images? <br /> 
     <em>If you select this option, you'll have to specify what they will be using</em> 
     <input type="checkbox" name="category_level" onchange="categorychanged(this.checked)" /> 

     <select name="category_parent" style="display:none" onchange="if(this.selectedIndex==SFTP){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};"> 
      <option value="1">Library</option> 
      <option value="2">SFTP</option> 
     </select> 
     <input style="visibility:hidden;" type="text" name="box"> 
    </form> 
<br /> 
</div>

功能，「categorychanged」，是由下面的JavaScript代碼來處理：

<script language="JavaScript" type="text/javascript"> 
<!-- 
function categorychanged(enable) 
{ 
    if (enable) 
    { 
     document.test.category_parent.style.display="block"; 
    } 
    else 
    { 
     document.test.category_parent.style.display="none"; 
    } 
} 
//--> 
</script>

現在，如果讓我選擇「SFTP」，沒什麼發生。第一部分正常工作，即選中複選框時顯示下拉菜單。

我在這裏做錯了什麼？謝謝

來源

2011-10-14 Ray

因此，這裏的a fiddle與工作代碼。問題是你正在檢查的價值。

this.selectedIndex

可以只是

this.value

但你的代碼還可以使用一些清理。首先，除非你有某種理由不這樣做，否則我會推薦一個類似Prototype.js或jQuery的圖書館。這會讓你的工作變得更容易。我還建議使用event listeners而不是內聯事件，因爲它們更乾淨。

來源

2011-10-14 20:09:57 Ktash

這工作？謝謝！至於使用圖書館，你可以知道，我的JavaScript技能是在newb級別。無論如何，這個網站只是一個模型，但這是我會考慮的。再次感謝。 – Ray

沒問題。如果你是新手，我會推薦一個圖書館。庫使得跨瀏覽器的代碼更容易，並且可以使許多事情變得更容易。再加上Sizzle選擇引擎對於尋找元素來說非常棒。 :) – Ktash

很高興知道@Ktash。另一個有趣的功能，探索！ – Ray

這裏的問題是條件「if（this.selectedIndex == SFTP）」。 SelectedIndex將只給出索引而不給出值。要獲得價值，你必須這樣做 -

this.options[this.selectedIndex].value

來源

2011-10-14 20:08:39

您使用的selectedIndex，這是代表選項元素

在這個例子中的位置的數量，圖書館是0和SFTP是1，所以你在做SFTP == 1，這顯然評估假。

如果你想獲得期權的價值，使用

<script type="text/javascript> 
function changeVisibility(element) 
{ 
    var value = element[element.selectedIndex].value 
    if(value == "SFTP") 
     //show 
    else 
     //hide 
} 
</script> 

<select onchange="changeVisibility(this)" > 
    <option value="Library">Library</option> 
    <option value="SFTP">SFTP</option> 
</select>

末，它的確定寫javascript這樣，當你還在學習，但在脾淋巴細胞的環境不這樣做......學習一JS庫，如jQuery，和完全獨立的JavaScript代碼從HTML ...這是更清潔的閱讀和維護

這是一個jQuery等價

<script type="text/javascript> 
$(function(){ 
    $("#myId").change(function(){ 
     if($(this).val() == "SFTP") 
      //show 
     else 
      //hide 
    }); 
}); 
</script> 

<select id="myId"> 
    <option value="Library">Library</option> 
    <option value="SFTP">SFTP</option> 
</select>

來源

2011-10-14 20:17:47 Andre

+1不厭其煩地解釋生產方法。謝謝@Andre – Ray

Javascript：使其一個文本框顯示，如果一個下拉選項中選擇

回答

相關問題