Question

当选择特定的OPTION值时，我想显示DIV。我有一个像这样的html元素。

 <select id="type">
  <option value="Article on Company">Article on Company</option>
  <option value="Article on Company">Article by Company</option>
  <option value="Concept Paper">Concept Paper</option>
</select>

这是以下内容

<div class="subdiv">
<div class="form-group mb-20">
    <label>Title</label>
    <input class="form-control" name="title">
</div>

<div class="form-group mb-20">
  <label>Description</label>
 <input class="form-control" name="description">
</div>
<div>

我想在页面加载时隐藏class subdiv。如果用户选择选项“公司文章”或“公司文章”，我想显示名称为“ title，description”的输入字段。如果用户选择值为“概念纸”的选项，那么我只想显示带有名称描述的输入字段。请帮助我。

Answer 1

您可以根据选定的选项值隐藏/显示元素。请尝试以下方式：

$('#type').change(function(){
  $('.subdiv').show();
  if($(this).val() == 'Article on Company' || $(this).val() == 'Article by Company'){
    $('[name=title], [name=description]').parent().show();
  }
  else if($(this).val() == 'Concept Paper'){
    $('[name=description]').parent().show();
    $('[name=title]').parent().hide();
  }
  else
    $('.subdiv').hide();
});

.subdiv{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
  <option value="Select">---Select-</option>
  <option value="Article on Company">Article on Company</option>
  <option value="Article by Company">Article by Company</option>
  <option value="Concept Paper">Concept Paper</option>
</select>

<div class="subdiv">
<div class="form-group mb-20">
    <label>Title</label>
    <input class="form-control" name="title">
</div>

<div class="form-group mb-20">
  <label>Description</label>
 <input class="form-control" name="description">
</div>
<div>

选择特定选项时显示div

1 个答案: