如何显示特定于下拉选择的隐藏 div？答案

【问题标题】：How to show hidden div specific to dropdown selection?如何显示特定于下拉选择的隐藏 div？
【发布时间】：2019-07-29 20:11:41
【问题描述】：

所以我正在从 JSON 格式中检索数据/信息。我有一个名称的下拉列表，当用户选择一个名称时，该人的隐藏信息将出现。下拉列表由相同的 JSON 信息/格式填充。

我不确定我需要使用什么功能来获取每个人的具体信息。

这是一个简化的 jsfiddle 链接 - https://jsfiddle.net/padzochambers/8036oebu/

.wrap {
  display: none; 
}

<select class="user_dropdown"> 
</select>

<div class="profile">
</div>

var data = [{
   "id": 1,
   "full_name": "Ignacius Antos",
   "email": "iantos0@jigsy.com",
   "password": "FK4umZJ9eh"
 }, 
 {
   "id": 2,
   "full_name": "Anallise Ousley",
   "email": "aousley1@yellowbook.com",
   "password": "5fLR4WhC"
 },
 {
   "id": 3,
   "full_name": "Norton Jenckes",
   "email": "njenckes2@de.vu",
   "password": "V24O3sl5nh"
 }
 ];

jQuery(function($) {
  $.each(data, function(key, value) {
    var profile_data = '';
    profile_data += '<option value="users">'+value.full_name+'</option>'; 
    $('.user_dropdown').append(profile_data);
  });
});  

jQuery(function($) {
  $.each(data, function(key, value) {
    var profile_data = '';
    profile_data += '<div class="wrap">'; <!--hidden div-->
    profile_data += '<div class="user">'+value.full_name+'</div>'; 
    profile_data += '<div class"user_info">'+value.email+' '+value.password+'</div>';
    profile_data += '</div>';
    $('.profile').append(profile_data);
  });
});

希望这是足够的信息。提前致谢

【问题讨论】：

标签： jquery html css ajax

【解决方案1】：

您可以使用此代码：

jQuery(function($) {
  $.each(data, function(key, value) {
    var profile_data = '';
    profile_data += '<option value="'+value.id+'">'+value.full_name+'</option>'; 
    $('.user_dropdown').append(profile_data);

    var profile_data = '';
    profile_data += '<div class="wrap" data-id="'+value.id+'">';
    profile_data += '<div class="user">'+value.full_name+'</div>'; 
    profile_data += '<div class"user_info">'+value.email+' '+value.password+'</div>';
    profile_data += '</div>';
    $('.profile').append(profile_data);
  });
});

$('.user_dropdown').change(function() {
    var id = $(this).val();
  $(".wrap").hide();
  $(".wrap[data-id='"+id+"']").show();
});

首先我将option 的value 更改为value="'+value.id+'"

其次，我已将data-id 添加到您的wrap 中，就像<div class="wrap" data-id="'+value.id+'">' 一样

现在我们使用change 函数来显示信息。

演示

var data = [{
   "id": 1,
   "full_name": "Ignacius Antos",
   "email": "iantos0@jigsy.com",
   "password": "FK4umZJ9eh"
 }, 
 {
   "id": 2,
   "full_name": "Anallise Ousley",
   "email": "aousley1@yellowbook.com",
   "password": "5fLR4WhC"
 },
 {
   "id": 3,
   "full_name": "Norton Jenckes",
   "email": "njenckes2@de.vu",
   "password": "V24O3sl5nh"
 }
 ];
 
jQuery(function($) {
  $.each(data, function(key, value) {
    var profile_data = '';
    profile_data += '<option value="'+value.id+'">'+value.full_name+'</option>'; 
    $('.user_dropdown').append(profile_data);
    
    var profile_data = '';
    profile_data += '<div class="wrap" data-id="'+value.id+'">';
    profile_data += '<div class="user">'+value.full_name+'</div>'; 
    profile_data += '<div class"user_info">'+value.email+' '+value.password+'</div>';
    profile_data += '</div>';
    $('.profile').append(profile_data);
  });
});

$('.user_dropdown').change(function() {
	var id = $(this).val();
  $(".wrap").hide();
  $(".wrap[data-id='"+id+"']").show();
});

.wrap {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="user_dropdown">
</select>

<div class="profile">
</div>

【讨论】：