使用JavaScript实现价格范围下拉菜单更改文本的功能,可以通过以下步骤实现:
<input type="text" id="priceInput" onblur="updateText()" placeholder="请输入价格">
<select id="rangeSelect" onchange="updateText()">
<option value="0-100">0-100</option>
<option value="100-500">100-500</option>
<option value="500-1000">500-1000</option>
</select>
<p id="resultText"></p>
updateText()
,该函数会在价格输入框失去焦点或下拉菜单选项改变时被调用:function updateText() {
var priceInput = document.getElementById("priceInput");
var rangeSelect = document.getElementById("rangeSelect");
var resultText = document.getElementById("resultText");
var price = priceInput.value;
var range = rangeSelect.value;
if (price && range) {
var priceRange = range.split("-");
var minPrice = parseInt(priceRange[0]);
var maxPrice = parseInt(priceRange[1]);
var inputPrice = parseInt(price);
if (inputPrice >= minPrice && inputPrice <= maxPrice) {
resultText.innerHTML = "价格在范围内";
} else {
resultText.innerHTML = "价格不在范围内";
}
} else {
resultText.innerHTML = "";
}
}
这样,当价格输入框失去焦点或下拉菜单选项改变时,会根据输入的价格和选择的范围,动态更新结果文本显示是否在范围内。
推荐的腾讯云相关产品:无特定产品与此功能直接相关。
请注意,以上答案仅供参考,具体实现方式可能因实际需求和环境而异。
领取专属 10元无门槛券
手把手带您无忧上云