仅允许列表框中包含实数的项目

时间:2016-04-27 13:04:42

标签: javascript jquery html

我有一个下拉列表,当我从下拉列表中选择项目时,我的列表框会从json中填充一组项目,并且该列表框中的一些项目没有reak数值,我只想要那些具有实数的项目值..下载是我的javascript.Please建议

$(document).ready(function() {
    $.ajax({
        url: "avb.json",
        dataType: "json",
        success: function(obj) {
            console.log("obj--", obj)
            var jsObject = obj;
            var usedNames = [];
            $('<option>', {
                text: 'Select your Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled',
                location: 'fixed'
            }).appendTo('#dropdown1')
            $.each(obj, function(key, value) {
                if (usedNames.indexOf(value.name) == -1) {

                    $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                    usedNames.push(value.name);
                }
            });
            $('#dropdown1').change(function() {
            if (!isNaN(this.value) ){
                $('#listbox').toggle(this.value != "");
                }
            });

            $('#dropdown1').change(function() {


                $('#listbox').empty();

                $('<option>', {
                    text: 'Select your List Option',
                    value: '',
                    selected: 'selected',
                    disabled: 'disabled'
                }).appendTo('#listbox');

                var selection = $('#dropdown1 :selected').text();
                console.log("as".selection);
                $.each(jsObject, function(index, value) {
                    console.log("%o",value)
                    if (value['name'] == selection) {
                        var optionHtml = '';
                        for (var i = 1; i <=20; i++) {

                            var attr = 'attr' + ('000' + i).substr(-3);
                            var val = 'val' + ('000' + i).substr(-3);

                            optionHtml += '<option value="' + attr + '" data-val="'+value[val]+'">' + value[attr] + '</option>';

                        }


                        $("#listbox").css("width", "500px")

                        $("#listbox").css("height", "300px")
                        $('#listbox').append(optionHtml);
                        return false;
                    }
                    var selectedOption = $(this).find('option:selected');
                    console.log(selectedOption);

                });

            });
            $("#listbox").on("click", function() {

                console.log("asd", $('#listbox option:selected').attr('data-val'));
                var zxv =  $('#listbox option:selected').attr('data-val')

                $(".bar").attr("y",zxv)
                console.log("test", $(".bar").attr("y",zxv))
            //   $(".bar").attr("height",'100')

            })
        }
    });
});

my json
[ {
 "name": "ABC",
 "date": 1459461600000, 
"attr001": "SIGN1",
 "val001": "60", 
"attr002": "SIGN2",
 "val002": "5",
 "attr003": "SIGN3", 
"val003": "100.00", 
"attr004": "SIGN4", 
"val004": "0",
"attr005": "SIGN5", 
"val005": "Traesnotfound" 
}, 
{
"name": "ABC",
 "date": 1461176704000,
 "attr001": "SIGN1",
 "val001": "200", 
"attr002": "SIGN2", 
"val002": "70", 
"attr003": "SIGN3", 
"val003": "100.00",
 "attr004": "SIGN4",
 "val004": "670",
 "attr005": "SIGN5", 
"val005": "Traceinvalid"
 }, 


 { "name": "XYZ", 
"date": 1459125900000, 
"attr001": "VISSE1",
 "val001": "100", 
"attr002": "VISSE2",
 "val002": "7",
 "attr003": "VISSE3",
 "val003": "300.00",
 "attr004": "VISSE4",
 "val004": "160",
 "attr005": "SIGN5", 
"val005": "not found"
 },

 { "name": "XYZ",
 "date": 1459461600000,
 "attr001": "VISSE1", 
"val001": "50", 
"attr002": "VISSE2",
 "val002": "70",
 "attr003": "VISSE3",
 "val003": "300.00",
 "attr004": "VISSE4",
 "val004": "230",
  "attr005": "SIGN5", 
"val005": "found"
 },

{ "name": "XYZ", 
"date": 1459461900000, 
"attr001": "VISSE1",
"val001": "300", 
"attr002": "VISSE2",
 "val002": "10", 
"attr003": "VISSE3", 
"val003": "500.00",
 "attr004": "VISSE4",
 "val004": "350",
 "attr005": "SIGN5", 
"val005": "not found" } ]

2 个答案:

答案 0 :(得分:0)

所以你需要验证添加到控件中的字符串吗?

试试这个: Validate decimal numbers in JavaScript - IsNumeric()

答案 1 :(得分:0)

你必须检查值是否为数字isNaN(value.name)如果提供的值不是数字,则此函数将返回true否则为false。有关详细信息,请查看isNaN() details此链接。

if (!isNaN(value.name) ) {
      $("#dropdown1").append("<option value=" + key + ">" +
                value.name + "</option>");
      usedNames.push(value.name);
}

从选项调用波纹管功能中删除非十进制值

function removeNonNumberEmptyOptions(){
   for(var i=0; i< $("#dropdown1 option").length;i++){
      if (isNaN($("#dropdown1 option")[i].value)){
          $("#dropdown1 option[value=" 
                     +$("#dropdown1 option")[i].value + "]").remove()
      }
   }
}

结帐https://fiddle.jshell.net/6b9ne2y0/6/根据您的期望将其工作链接

你正在为for循环做硬编码它应该是

 userPorperties = Object.getOwnPropertyNames(value);
                for (var i = 0; i <= userPorperties.length -1; i++) {
                    if (!isNaN(value[userPorperties[i]]))
                      optionHtml += '<option value="' + userPorperties[i] + '"          
                      data-val="' + value[userPorperties[i]]  + '">' 
                      + userPorperties[i] + "=>" 
                      +value[userPorperties[i]]+ '</option>';

                }