以html形式動態生成一個新的下拉菜單

Question

我定義了一個html表單。 我有一個按鈕供用戶選擇他的職業。 如果他的職業恰好是一名學生，那么我需要動態地生成另一個新按鈕。 如果用戶選擇的不是學生，則我不希望有任何新的按鈕。 我不確定該怎么做。 我是否使用jquery？ 我不知道使用jquery。 有人可以幫忙嗎？ 任何指針

謝謝。

<?php

?>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
    $('#occupation').change(function()
    {
        if($(this).val() == 'Student')
        {
            $('#school').show();
        } else {
            $('#school').hide();
        }
    });
});


</script>

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>


<form>

<select name="occupation" id="occupation">
    <option value="">- Select Occupation -</option>
    <option value="Worker">Worker</option>
    <option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
    <option value="">Select School Type</option>
    <option value="4 Year">4 Year</option>
    <option value="2 Year">2 Year</option>
</select>


</form>

</body>
</html>

Answer 1

我個人通過在HTML中放置其他表單元素來實現此目的，就像這樣簡單地將其隱藏：

<select name="occupation" id="occupation">
    <option value="">- Select Occupation -</option>
    <option value="Worker">Worker</option>
    <option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
    <option value="">Select School Type</option>
    <option value="4 Year">4 Year</option>
    <option value="2 Year">2 Year</option>
</select>

然后，您可以使用JS（我更喜歡jQuery）來顯示div或在適用時隱藏div：

$(document).ready(function()
{
    $('#occupation').change(function()
    {
        if($(this).val() == 'Student')
        {
            $('#school').show();
        } else {
            $('#school').hide();
        }
    });
});

Answer 2

使用jQuery可以簡化此過程：

假設您具有以下條件：

<form>

  <select name="occupation">
      <option value="Non-Student">Non-Student</option>
      <option value="Student">Student</option>
  </select>

</form>

如果用戶選擇“學生”，則將使用以下內容附加按鈕：

$(function(){
    $('select[name="occupation"]').change(function(){
      var val = $(this).val();
      if(val=='Student'){
         $('form').append('<button>New Button</button>');
      }
    });
});

以html形式動態生成一個新的下拉菜單

問題描述

2 個解決方案

解決方案1
3 已采納 2012-10-11 15:52:31

解決方案2
0 2012-10-11 15:51:10

以html形式動態生成一個新的下拉菜單

問題描述

2 個解決方案

解決方案1 3 已采納 2012-10-11 15:52:31

解決方案2 0 2012-10-11 15:51:10

解決方案1
3 已采納 2012-10-11 15:52:31

解決方案2
0 2012-10-11 15:51:10