如果选择选项选择固定值,则输入字段类型卢比值仅支持带有卢比符号的 20 位数字。如果选择百分比,则用符号百分比替换卢比符号,并且值类型仅带有百分比符号的 2 位输入值,无需单击按钮
我的这段代码工作正常,但我面临两个小问题
.1 如果我的网页加载默认值设置已修复(但输入值和卢比符号不起作用
.2 如果更改值,则两种条件都可以工作,但值不会自动重置更改状态。如果用户选择百分比单个,则不再更改百分比值,请检查我的代码中的任何一个
这是我的类似代码
<!DOCTYPE html>
<html>
<head>
<title>Input Field</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#dropdown').change(function() {
var selectedOption = $(this).val();
if (selectedOption === 'fixed') {
$('#inputField').attr('maxlength', '20');
$('#inputField').on('input', function() {
var value = $(this).val();
var formattedValue = '₹' + value.replace(/\D/g, '').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
$(this).val(formattedValue);
});
} else if (selectedOption === 'percentage') {
$('#inputField').attr('maxlength', '2');
$('#inputField').on('input', function() {
var value = $(this).val();
var formattedValue = value.replace(/\D/g, '') + '%';
$(this).val(formattedValue);
});
}
});
});
</script>
</head>
<body>
<select id="dropdown">
<option value="fixed">Fixed Value</option>
<option value="percentage">Percentage</option>
</select>
<input type="text" id="inputField">
</body>
</html>
让事情变得更容易并创建单独的函数,并基于该函数在文本字段上应用您的逻辑。
示例:
$('#dropdown').change(function() {
var selectedOption = $(this).val();
check(selectedOption);
});
$('#inputField').on('input', function() {
var selectedOption = $('#dropdown :selected').val();
check(selectedOption);
});
function check(inp) {
var value = $('#inputField').val();
if (inp === 'fixed') {
$('#inputField').attr('maxlength', '20');
var formattedValue = '₹' + value.replace(/\D/g, '').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
$('#inputField').val(formattedValue);
} else {
$('#inputField').attr('maxlength', '2');
var formattedValue = value.replace(/\D/g, '') + '%';
$('#inputField').val(formattedValue);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
<option value="fixed">Fixed Value</option>
<option value="percentage">Percentage</option>
</select>
<input type="text" id="inputField">