javascript - 如何根据select2 jQuery字段中选择的多个值显示/隐藏div
问题描述
我有 select2 jquery 下拉列表,它由两个项目组成 *For Rent *For Sales 如果我选择了 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();
})
}
);
When For Sale is selected
选择出租时
当两者都被选中时,它应该显示两个字段
前端代码自动生成
解决方案
这是您的问题的解决方案:
最初,您需要在更改事件中保持两个 div 隐藏。然后检查属性类型中所选值的值并显示您的 div
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>
推荐阅读
- oracle - PL/SQL 循环通过 PDB
- pyspark - Create dummy variables frame pyspark
- angular - Material Angular 滚动到 mat-list 上的元素
- metasploit - 对多个连接执行一次 run -jz
- java - openapi-code-generator 3.3.4 不读取标签和 API 类名不是预期的
- linux - Apache 重定向到 Query 上的主 URL
- pyspark-sql - pyspark中是否有Substr oracle等效功能
- python - 用相似的列值Python填充数据框中的缺失值
- android - 从 Windows 主机运行 ncurses 本机 android 应用程序时屏幕上出现凌乱的输出
- c# - 从方法返回而不提交事务