单击下拉选项并在 Django 中显示特定字段

Posted 2023-02-24

【中文标题】单击下拉选项并在 Django 中显示特定字段

【英文标题】：Click in a dropdown option and show an specific field in Django

【发布时间】：2018-11-17 16:56:01

【问题描述】：

我有以下情况，我有这个型号：

class Profile(models.Model):

    DEVELOPER = 1
    MARKETER = 2
    ACADEMIC = 3
    INFLUENCER = 4
    COMMUNITY_MEMBER = 5

    ROLE_CHOICES = (
        (DEVELOPER, 'Developer'),
        (MARKETER, 'Marketer'),
        (ACADEMIC, 'Academic'),
        (INFLUENCER, 'Influencer'),
        (COMMUNITY_MEMBER, 'Community Member'),
    )

    user = models.OneToOneField(User)
    account_type = models.ForeignKey(AccountType, default=AccountType.FREE)
    role = models.PositiveIntegerField(choices=ROLE_CHOICES, null=True, blank=True)
    github_profile = models.URLField(blank=True, null=True)
    linkedin_profile = models.URLField(blank=True, null=True)

现在我想做的是，如果用户在下拉列表中单击Developer 选项，则应该出现 github_profile，否则应该保持隐藏。

现在，看起来像这样，Github Link 字段应该是隐藏的：

这是我的html：

  <div class="form-group select-wrapper">
    <label for="role">What best describes you?</label>
    <select id="role" name="role" class="form-control">
      <option selected>Choose an option</option>
      % for index, value in roles_form.fields.roles.choices %
          <option value=" index "> value </option>
      % endfor %
    </select>
  <span class="role-error hidden" style="color: red"></span>
  </div>
  <div class="form-group">
      <label for="github_profile">GitHub Profile (optional)</label>
      <input type="url" class="form-control" name="github_profile" id="github_profile" placeholder="https://github.com/your-profile">
      <span class="github_profile-error hidden" style="color: red"></span>
  </div>

我知道这是一个有条件的事情，但是我是 Django 的新手，我不太确定如何实现它。

编辑：

我做了以下功能：

$('select').on('change', function() 

          var value = $(this).val();
          if (value == 1) 
             $('#github_link').show();
           else if (value != 1) 
             $('#github_link').hide();
          
  )

它有效，但我得到了以下反馈：这里你硬编码了值“1”，但如果这个列表上的位置发生变化，那么这个行为就会中断。相反，您应该引用变量 model.profile.DEVELOPER ，这将产生变量 DEVELOPER 的当前值，即使它发生变化。

【问题讨论】：

你想在哪里显示？在 django 管理员中？还是在您自己的表单模板中？

@Lemayzeur 我编辑了这个问题，所以它目前在我的 html 模板中，但应该隐藏 Github 链接。

你可以用js做到这一点

@Lemayzeur 只是在 html 模板的末尾添加脚本标签对吗？

正确，在select 标签中添加一个事件监听器，以检测何时选择了developer

【参考方案1】：

我认为实现这一目标的唯一方法是使用 javascript。例如在这个例子中使用 jQuery：https://***.com/a/26589859/5698557