javascript - 下拉禁用功能无法正常工作
问题描述
$('.dropdown-menu.ddRange')
.click(function(e) {
e.stopPropagation();
});
function disableDropDownRangeOptions(max_values, minValue) {
if (max_values) {
max_values.each(function() {
var maxValue = $(this).attr("value");
console.log("disableDropDownRangeOptions minValue: ",minValue);
console.log("disableDropDownRangeOptions maxValue: ",maxValue);
if (parseInt(maxValue) < parseInt(minValue)) {
$(this).addClass('disabled');
} else {
$(this).removeClass('disabled');
}
});
}
}
function setuinvestRangeDropDownList(min_values, max_values, min_input, max_input, clearLink, dropDownControl) {
min_values.click(function() {
var minValue = $(this).attr('value');
console.log("Min value: ",minValue);
min_input.val(minValue);
document.getElementById('price_range1').innerHTML = minValue;
disableDropDownRangeOptions(max_values, minValue);
validateDropDownInputs();
});
max_values.click(function() {
var maxValue = $(this).attr('value');
max_input.val(maxValue);
document.getElementById('price_range2').innerHTML = maxValue;
toggleDropDown();
});
clearLink.click(function() {
min_input.val('');
max_input.val('');
disableDropDownRangeOptions(max_values);
validateDropDownInputs();
});
min_input.on('input', function() {
var minValue = min_input.val();
disableDropDownRangeOptions(max_values, minValue);
validateDropDownInputs();
});
max_input.on('input', validateDropDownInputs);
max_input.blur('input', function() {
toggleDropDown();
});
function validateDropDownInputs() {
var minValue = parseInt(min_input.val());
var maxValue = parseInt(max_input.val());
if (maxValue > 0 && minValue > 0 && maxValue < minValue) {
min_input.addClass('inputError');
max_input.addClass('inputError');
return false;
} else {
min_input.removeClass('inputError');
max_input.removeClass('inputError');
return true;
}
}
function toggleDropDown() {
if (validateDropDownInputs() &&
parseInt(min_input.val()) > 0 &&
parseInt(max_input.val()) > 0) {
// auto close if two values are valid
dropDownControl.dropdown('toggle');
}
}
}
setuinvestRangeDropDownList(
$('.price_Ranges .min_value'),
$('.price_Ranges .max_value'),
$('.investRangePrice .freeformPrice .min_input'),
$('.investRangePrice .freeformPrice .max_input'),
$('.investRangePrice .btn-clear'),
$('.investRangePrice .dropdown-toggle'));.arrow{
color: #ccc;
background-color: #ccc;
display: inline-block;
height: 1px;
width: 12px;
position: relative;
}
.max_value{
padding: 6px 6px 6px 30px;
}
.price_Ranges {
float: right;
width: 50%;
}
.price_Ranges a {
display: block;
text-align: left;
padding: 6px 0 6px 0;
color: #6f6e6e;
font-weight: 500;
}
.price_Ranges a.max_value {
padding-right: 12px;
padding-left: 12px;
margin-left: 30px;
}
.price_Ranges a.min_value {
padding-right: 22px;
padding-left: 12px;
}
.price_Ranges a.disabled {
pointer-events: none;
cursor: default;
color: #E5E4E2;
}
.price_Ranges a:hover {
background: #0074e4;
color: #fff;
cursor: pointer;
text-decoration: none;
}
.btnClear {
clear: both;
border-top: 1px solid #dadada;
padding: 5px 0 0 0;
text-align: center;
}
input.inputError,
input.inputError:focus {
border-color: #e2231a;
background-color: white;
color: #e2231a;
box-shadow: inset 0 0 5px #F7BDBB;
border-radius: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col col-md-6">
<div class="span2 investRange">
<div class="">
<button id="min-max-price-range" style="margin-left: 3px" class="form-control selectpicker select-btn dropdown-toggle searchParams" href="#" data-toggle="dropdown" tabindex="6">
<div class="filter-option pull-left span_price">
<span id="price_range1"> </span> - <span id="price_range2">Price (PKR)</span></div>
<span class="bs-caret" style="float: right;"><span class="caret"></span></span>
</button>
<div class="investRangePrice dropdown-menu ddRange" role="menu" style="width: 350px;padding: 15px;">
<div class="rangemenu">
<div class="freeformPrice" style="display: flex">
<div class="col-md-5">
<input style="text-align: center;" name="min_price" type="text" class="min_input form-control" placeholder="Min">
</div>
<div style="margin-top: 10px;" class="col-md-2 ">To</div>
<div class="col-md-5">
<input style="text-align: center;" name="max_price" type="text" class="max_input form-control" placeholder="Max">
</div>
</div>
<div>
<div style="height:190px;overflow-y:scroll;float: left;margin-top:10px;" class="price_Ranges rangesMin col-md-5">
<a class="min_value" style="margin-top: 0px !important;" value="" href="javascript:void(0)">Any</a>
<a class="min_value" value="500000" href="javascript:void(0)">500,000</a>
<a class="min_value" value="1000000" href="javascript:void(0)">1,000,000</a>
<a class="min_value" value="2000000" href="javascript:void(0)">2,000,000</a>
<a class="min_value" value="3500000" href="javascript:void(0)">3,500,000</a>
<a class="min_value" value="5000000" href="javascript:void(0)">5,000,000</a>
<a class="min_value" value="6500000" href="javascript:void(0)">6,500,000</a>
<a class="min_value" value="8000000" href="javascript:void(0)">8,000,000</a>
<a class="min_value" value="10000000" href="javascript:void(0)">10,000,000</a>
<a class="min_value" value="11000000" href="javascript:void(0)">11,000,000</a>
<a class="min_value" value="15000000" href="javascript:void(0)">15,000,000</a>
<a class="min_value" value="17500000" href="javascript:void(0)">17,500,000</a>
<a class="min_value" value="20000000" href="javascript:void(0)">20,000,000</a>
<a class="min_value" value="25000000" href="javascript:void(0)">25,000,000</a>
<a class="min_value" value="30000000" href="javascript:void(0)">30,000,000</a>
<a class="min_value" value="40000000" href="javascript:void(0)">40,000,000</a>
<a class="min_value" value="50000000" href="javascript:void(0)">50,000,000</a>
<a class="min_value" value="75000000" href="javascript:void(0)">75,000,000</a>
<a class="min_value" value="100000000" href="javascript:void(0)">100,000,000</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-2"></div>
<div style="height:190px;overflow-y:scroll;margin-top: 10px;" class="price_Ranges rangesMax col-md-5">
<a class="max_value" style="margin-top: 0px !important;" value="" href="javascript:void(0)">Any</a>
<a class="max_value" value="500000" href="javascript:void(0)">500,000</a>
<a class="max_value" value="1000000" href="javascript:void(0)">1,000,000</a>
<a class="max_value" value="2000000" href="javascript:void(0)">2,000,000</a>
<a class="max_value" value="3500000" href="javascript:void(0)">3,500,000</a>
<a class="max_value" value="5000000" href="javascript:void(0)">5,000,000</a>
<a class="max_value" value="6500000" href="javascript:void(0)">6,500,000</a>
<a class="max_value" value="8000000" href="javascript:void(0)">8,000,000</a>
<a class="max_value" value="10000000" href="javascript:void(0)">10,000,000</a>
<a class="max_value" value="11000000" href="javascript:void(0)">11,000,000</a>
<a class="max_value" value="15000000" href="javascript:void(0)">15,000,000</a>
<a class="max_value" value="17500000" href="javascript:void(0)">17,500,000</a>
<a class="max_value" value="20000000" href="javascript:void(0)">20,000,000</a>
<a class="max_value" value="25000000" href="javascript:void(0)">25,000,000</a>
<a class="max_value" value="30000000" href="javascript:void(0)">30,000,000</a>
<a class="max_value" value="40000000" href="javascript:void(0)">40,000,000</a>
<a class="max_value" value="50000000" href="javascript:void(0)">50,000,000</a>
<a class="max_value" value="75000000" href="javascript:void(0)">75,000,000</a>
<a class="max_value" value="100000000" href="javascript:void(0)">100,000,000</a>
</div>
</div>
</div>
<br>
<br>
<div style="text-align: center;margin-top: 170px;margin-left: 35px;" class="col-md-10 btn-clear">
<a href="javascript:void(0)" class="price-reset-button">reset</a>
</div>
</div>
</div>
</div>
</div>我已经使用 HTML/CSS 和适当的 Javascript 验证代码制作了两个最小最大价格表。
它应该像下面这样工作：
如果我选择一个 min_value，则必须禁用所有小于该 min_value 的 max_values。
但是，此“禁用”功能不起作用。如果我选择一个 min_value，小于该 min_value 的 max_values 不会禁用。
任何帮助，将不胜感激！
解决方案
推荐阅读
- python-2.7 - 如何使用 boto3 将标签添加到 Cloudwatch 日志组？
- python - Python：使用 subprocess 不断地 ls
- python - 我是否可以使用具有相同列表文本的字符串整数调用列表
- botframework - 如何在 Skype for business 中添加提示？
- azure - 为什么 Azure 将 400（错误请求）响应视为提供程序中的 SCIM 实现错误？
- python - 如何制作带有情节的 bar_polar 图表，没有频率列？
- c# - 访问用于 WinForms、Xamarin.Forms 等的 .NET Standard 库中的资产文件
- javascript - 如何访问从客户端 JS 获取的文本响应以进行 fastify？
- haskell - 直接从 git 存储库安装 Haskell 包？
- python - 散点图中的颜色图例 - 无法理解代码