以html形式动态生成一个新的下拉菜单

Question

I have a html form defined . 我定义了一个html表单。 I have a button for the user to select his occupation . 我有一个按钮供用户选择他的职业。 If his occupation happens to be a student then i need to generate another new button dynamically . 如果他的职业恰好是一名学生，那么我需要动态地生成另一个新按钮。 If the user selects anything other than a student then i dont want any new button . 如果用户选择的不是学生，则我不希望有任何新的按钮。 I am unsure how to do . 我不确定该怎么做。 Do i use jquery ? 我是否使用jquery？ I have no idea to use jquery . 我不知道使用jquery。 Can some one help ? 有人可以帮忙吗？ Any pointers 任何指针

Thanks. 谢谢。

<?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

Personally I accomplish this by placing the additional form element in the HTML, simply hidden like so: 我个人通过在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>

Then you can use JS, as I prefer jQuery, to show the div or hide the div when applicable: 然后，您可以使用JS（我更喜欢jQuery）来显示div或在适用时隐藏div：

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

Answer 2

Using jQuery would simplify this: 使用jQuery可以简化此过程：

Let's say you have the following: 假设您具有以下条件：

<form>

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

</form>

Then the following would be used to append the button if the user selected 'Student': 如果用户选择“学生”，则将使用以下内容附加按钮：

$(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