0

我定义了一个 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>
4

2 回答 2

3

就我个人而言，我通过在 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();
        }
    });
});
于 2012-10-11T15:52:31.120 回答
0

使用 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>');
      }
    });
});
于 2012-10-11T15:51:10.000 回答