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

Question

所以我正在从 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);
  });
}); 

希望这些信息足够了。提前致谢

Answer 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();
});

首先，我更改了 value的 option至 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>