根據另一個選擇框的輸入動態添加選擇框

-1

我正在構建一個表單，用於將學生的結果輸入到學校數據庫中。現在學校有5個第5至第8個標準，第9個至第10個標準有1個。根據另一個選擇框的輸入動態添加選擇框

這裏是我想要做的，應該有一個選擇框，用戶可以選擇他想要輸入數據的標準，如果選擇的標準在5到8的範圍內，那麼另一個選擇框需要要動態添加，可以選擇「Section A」或「Section B」。如果用戶選擇九年級或十年級，那麼不應該有部分選擇框。

來源

2012-07-26 Rick Roy

歡迎來到Stackoverflow - 請花些時間閱讀[常見問題]（http://stackoverflow.com/faq） - 特別是關於在這裏要問什麼問題的部分 - 這不是*免費獲取代碼*網站...這個想法是，你發佈一個問題和人力資源試圖幫助... – ManseUK 2012-07-26 12:28:43

歡迎來到StackOverflow。

由於您沒有顯示任何html標記或嘗試爲自己編寫JavaScript，因此我只會給您一個基本的jQuery解決方案，並將其留給您以匹配您的實際html。

在我看來，最簡單的方法是實現您的要求是在html標記中包含選擇元素，並隱藏並顯示第二個適用的元素。（這不僅是更容易比動態地添加和刪除元素，它有讓您的形式誰擁有禁用JavaScript偶爾的用戶可訪問的額外優勢。）

$(document).ready(function() { 
    var $section = $("#section").hide(); 
    $("#standard").change(function() { 
     var val = +$(this).val(); 
     if (val >= 5 && val <= 8) // assume option elements have value="5", etc. 
      $section.show(); 
     else 
      $section.hide(); 
    }); 
});

延伸閱讀：http://api.jquery.com/

來源

2012-07-26 12:35:41 nnnnnn

感謝您的想法，我沒有想到它會工作得很好 – 2012-07-27 13:25:09

的下面的jQuery讓你看的選擇元件上的變化，並獲得當前選擇的元素：

$(function() { 
    $("#sections").change(function() { 
     var value = $(this).val(); 
     if(value > 8) { 
      //do stuff 
     } else { 
      //do other stuff 
     } 
    }); 
});

然後，您可以使用$（「選擇」）顯示（）和$（「選擇」）。 hide（）方法顯示/顯示其他元素。

來源

2012-07-26 12:37:18

HTML

<label for="std">Std</label> 
    <select id="std"> 
    <option value="0">--Select--</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    </select> 
    <span id="gradeContainer" class="hide"> 
    <label for="grade">Grade</label> 
    <select id="grade"> 
     <option value="0">--Select--</option> 
     <option value="1">Grade A</option> 
     <option value="2">Grade B</option> 
    </select> 
    </span>

CSS

.hide { display : none }

$(function() { 
     $("#std").change(function() { 
      var value = $(this).val(); 
      if(parseInt(value,10)>8) { 
       $("#gradeContainer").show(); 
      } else { 
       $("#gradeContainer").hide(); 
      } 
     }); 

});

來源

2012-07-26 12:44:31

謝謝你的代碼真的幫助完整:) – 2012-07-27 13:28:08

我花了一點你所有的想法，並結束了這一點，它的工作原理，並認爲我只是發佈最終結果

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script> 
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){ 
$("#std").change(function() { 
     var value = $(this).val(); 
     if(parseInt(value,10)>8) { 
      $("#gradeContainer").hide(); 
     } else { 
      $("#gradeContainer").show(); 
     } 
    }); 

});//]]> 
</script> 
</head> 
<body> 
<label for="std">Std</label> 
<select id="std"> 
    <option value="0">--Select--</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
</select> 
<span id="gradeContainer" class="hide"> 
<label for="grade">Grade</label> 
<select id="grade"> 
    <option value="0">--Select--</option> 
    <option value="1">Grade A</option> 
    <option value="2">Grade B</option> 
</select> 
</span> 
</body> 
</html>

來源

2012-08-03 16:47:29

根據另一個選擇框的輸入動態添加選擇框

回答

相關問題