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 个答案: