如何 show/hide div 基于在 select2 jQuery 字段中选择的多个值

Question

我有 select2 jquery 下拉菜单，它由两个项目组成 *出租 *销售如果我选择 For Rent，某些字段将显示在其下方，与 For sales 相同。问题是我不知道如果用户在下拉列表中同时选择了这两个字段，我将如何显示这两个字段。

在我的代码中，我尝试这样做，但是当用户只选择一个时，它会显示两个字段

$('#for_sales_fields').hide();
$('#for_rents_fields').hide();


$('#property-types-ids').change(function() {

  if($(this).val() == 1) {
    $('#for_sales_fields').show();
  }
  else {
    $('#for_sales_fields').hide();
  }
  if($(this).val() == 2) {
    $('#for_rents_fields').show();
  }
  else {
    $('#for_rents_fields').hide();
  }

  var test = [];
  $.each($('#property-types-ids :selected'), function(){
      test.push($(this).val());
      $('#for_sales_fields').show();
      $('#for_rents_fields').show();
  })

 }
 );

选择出售时

选择“出租”时

当两者都选中时，它应该显示两个字段

前端代码自动生成

Answer 1

这是您的问题的解决方案：

最初，您需要在更改事件中将 div 都隐藏起来。然后检查属性中所选值的值类型并显示你的 divs

var s2 = $("#property-types-ids").select2({
    placeholder: "Choose property type",
    tags: true
});

var vals = [];

vals.forEach(function(e){
if(!s2.find('option:contains(' + e + ')').length) 
  s2.append($('<option>').text(e));
});

s2.val(vals).trigger("change"); 



$('#for_sales_fields').hide();
$('#for_rents_fields').hide();

$('#property-types-ids').change(function() {

  $('#for_sales_fields').hide();
  $('#for_rents_fields').hide();

  var test = [];
  $.each($('#property-types-ids :selected'), function(){
      test.push($(this).val());
    if($(this).val() == 1) {
      $('#for_sales_fields').show();
    }
    if($(this).val() == 2) {
      $('#for_rents_fields').show();
    }
  })

 }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>

<select multiple name="event_type[]" class="form-control" id="property-types-ids">
  <option value="1">For Sale</option>
  <option value="2">For Rent</option>
</select>


<div id ="for_sales_fields">
  #sales fields div
</div>

<div id ="for_rents_fields">
  #Rent fields div
</div>

如何 show/hide div 基于在 select2 jQuery 字段中选择的多个值

How to show/hide div based on selected Multiple value in select2 jQuery field

javascript

jquery

jquery-select2

选择出售时

选择“出租”时

当两者都选中时，它应该显示两个字段

前端代码自动生成