如果选择选项选择固定,则输入字段类型卢比支持带有卢比符号的 20 位数字,如果选择百分比则替换卢比符号

问题描述 投票:0回答:1

如果选择选项选择固定值,则输入字段类型卢比值仅支持带有卢比符号的 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>
javascript jquery jdeveloper react-fullstack
1个回答
0
投票

让事情变得更容易并创建单独的函数,并基于该函数在文本字段上应用您的逻辑。

示例:

$('#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">

© www.soinside.com 2019 - 2024. All rights reserved.