Question

jquery（或独立的js）有没有好的数字选择器？

我想要一个数字选择器，其中有一个用户可以选择的最大和最小数字。此外，它还有其他选项，例如显示奇数或偶数或素数或数字范围，从而跳过中间的某些数字。

Answer 1

使用select执行此操作，您可以创建一个数组，其中包含要跳过的数字，并执行for循环来编写options：

int minNumber = 0;
int maxNumber = 10;

int[] skipThese = { 5, 7 };

for (int i = minNumber; i <= maxNumber; i++)
{
    if(!skipThese.Contains(i)) Response.Write(String.Concat("<option value=\"", i, "\">", i, "</option>"));
}

您可以使用razor或任何其他方式输出HTML。

您也可以使用jQuery动态地执行此操作，遵循相同的想法：

$(document).ready(function() {
    var minNumber = 0;
    var maxNumber = 10;

    var skipThese = [5, 7];

    for (var i = minNumber; i <= maxNumber; i++) {
        if ($.inArray(i, skipThese) == -1) $('#selectListID').append("<option value=\"" + i + "\">" + i + "</option>");
    }
});

编辑：或者您可以在aspx页面中使用上面的C＃代码并从页面加载AJAX：

在页面中创建一个选择框：

<select name="numPicker" id="numPicker">
    <option>Loading...</option>
</select>

在此页面的脚本中，您可以使用jQuery的ajax()来获取数据并填充<select>：

$(document).ready(function() {
    var numPickerSelect = $("#numPicker");
    $.ajax({
        url: 'url/to/page.aspx',
        type: 'post'
        success: function(data) {
            numPickerSelect.find('option').remove(); // Remove the options in the select field
            numPickerSelect.append(data); // Load the content generated by the server into the select field
        },
        error: function() {
            alert('An error has ocurred!');
        }
    });
    //Or use this (not sure if will work)
    numPickerSelect.load("url/to/page.aspx");
});

Answer 2

我用过这个。您应该能够修改以相当容易地添加额外选项，例如min和max。

// Make a control only accept numeric input
// eg, $("#myedit").numeric()
//  $("#myedit").numeric({alow: ' ,.'})
//  $("#myedit").numeric({decimals: 2})

(function($) {

    $.fn.alphanumeric = function(p) {

        if (p == 'destroy') {
            $(this).unbind('keypress');
            $(this).unbind('blur');
            return;
        }

        p = $.extend({
            ichars: "!@#$%^&*()+=[]\\\';,/{}|\":<>?~`.- ",
            nchars: "",
            allow: "",
            decimals: null
        }, p);

        return this.each
            (
                function() {

                    if (p.nocaps) p.nchars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                    if (p.allcaps) p.nchars += "abcdefghijklmnopqrstuvwxyz";

                    s = p.allow.split('');
                    for (i = 0; i < s.length; i++) if (p.ichars.indexOf(s[i]) != -1) s[i] = "\\" + s[i];
                    p.allow = s.join('|');

                    var reg = new RegExp(p.allow, 'gi');
                    var ch = p.ichars + p.nchars;
                    ch = ch.replace(reg, '');

                    var dp = p.decimals;

                    var isInteger = function(val) {
                        var objRegExp = /(^-?\d\d*$)/;
                        return objRegExp.test(val);
                    };

                    var isNumeric = function(val) {
                        // If the last digit is a . then add a 0 before testing so if they type 25. it will be accepted
                        var lastChar = val.substring(val.length - 1);
                        if (lastChar == ".") val = val + "0";

                        var objRegExp = new RegExp("^\\s*-?(\\d+(\\.\\d{1," + dp + "})?|\\.\\d{1," + dp + "})\\s*$", "g");
                        if (dp == -1)
                            objRegExp = new RegExp("^\\s*-?(\\d+(\\.\\d{1,25})?|\\.\\d{1,25})\\s*$", "g");

                        var result = objRegExp.test(val);
                        return result;
                    };
                    $(this).blur(function(e) {
                        var text = $(this).val();
                        if (dp != null) {
                            if (dp == 0) {
                                if (!isInteger(text)) {
                                    $(this).val('');
                                    e.preventDefault();
                                }
                            }
                            else {
                                if (!isNumeric(text)) {
                                    $(this).val('');
                                    e.preventDefault();
                                }
                            }
                        } else {
                            var c = text.split('')
                            for (i = 0; i < text.length; i++) {
                                if (ch.indexOf(c[i]) != -1) {
                                    $(this).val('');
                                    e.preventDefault();
                                };
                            }
                        }
                    });
                    $(this).keypress
                        (
                            function(e) {

                                switch (e.which) {
                                    //Firefox fix, for ignoring specific presses             
                                    case 8: // backspace key
                                        return true;
                                    case 46: // delete key
                                        return true;
                                };

                                if (dp != null) {

                                    if (e.which == 32) { e.preventDefault(); return false; }

                                    var range = getRange(this);
                                    var typed = String.fromCharCode(e.which);
                                    var text = $(this).val().substr(0, range.start) + typed + $(this).val().substr(range.start);

                                    if (dp == 0) {
                                        if (!isInteger(text)) e.preventDefault();
                                    }
                                    else {
                                        if (!isNumeric(text)) e.preventDefault();
                                    }
                                    return;
                                }

                                if (!e.charCode) k = String.fromCharCode(e.which);
                                else k = String.fromCharCode(e.charCode);

                                if (ch.indexOf(k) != -1) e.preventDefault();
                                if (e.ctrlKey && k == 'v') e.preventDefault();
                            }
                        );

                    $(this).bind('contextmenu', function() { return false });

                }
            );

    };

    $.fn.numeric = function(p) {

        if (p == 'destroy') {
            $(this).unbind('keypress');
            $(this).unbind('blur');
            return;
        }
        var az = "abcdefghijklmnopqrstuvwxyz";
        az += az.toUpperCase();

        var opts = {};

        if (!isNaN(p)) {
            opts = $.extend({
                nchars: az
            }, { decimals: p });
        } else {
            opts = $.extend({
                nchars: az
            }, p);
        }
        return this.each(function() {
            $(this).alphanumeric(opts);
        }
        );

    };

    $.fn.integer = function(p) {

        if (p == 'destroy') {
            $(this).unbind('keypress');
            $(this).unbind('blur');
            return;
        }

        var az = "abcdefghijklmnopqrstuvwxyz";
        az += az.toUpperCase();

        p = {
            nchars: az,
            allow: '-',
            decimals: 0
        };

        return this.each(function() {
            $(this).alphanumeric(p);
        }
        );
    };

    $.fn.alpha = function(p) {

        if (p == 'destroy') {
            $(this).unbind('keypress');
            $(this).unbind('blur');
            return;
        }
        var nm = "1234567890";

        p = $.extend({
            nchars: nm
        }, p);

        return this.each(function() {
            $(this).alphanumeric(p);
        }
        );

    };

})(jQuery);

JQuery（或Javascript）的任何好的数字选择器？

2 个答案: