选择不同选项时,输入字段类型可以支持20位带有卢比符号的卢比或替换为百分比
P粉022140576
P粉022140576 2023-08-13 18:35:32
[JavaScript讨论组]

如果选择选项选择固定值,则输入字段类型为卢比值仅支持20位数,带有卢比符号。如果选择百分比,则用百分比符号替换卢比符号,并且值类型仅为2位数输入值,无需点击按钮

我的这段代码工作正常,但我遇到了两个小问题 1. 如果我的网页加载默认值设置为固定值(但输入值和卢比符号不起作用

2. 如果更改值,然后同时工作,但值不会自动重置为更改状态。如果用户选择单个百分比,则不再更改百分比值,请检查我的任何一段代码 这是类似的代码

<!DOCTYPE html>
<html>
<head>
    <title>输入字段</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">固定值</option>
        <option value="percentage">百分比</option>
    </select>
    <input type="text" id="inputField">
</body>
</html>


P粉022140576
P粉022140576

全部回复(1)
P粉063039990

让我们简化事情,创建一个单独的函数,并基于该函数在文本字段上应用您的逻辑。

示例:

$('#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">固定值</option>
  <option value="percentage">百分比</option>
</select>
<input type="text" id="inputField">
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号