Question

我有一个页面可根据先前的选择生成选项下拉列表。选择父下拉列表后，将触发AJAX调用，该调用将返回子选项的JSON响应。

function fetchLines(line) {

// Define vars we will use in this function
var dropdown = '';

// AJAX call to lines/sublines
$.ajax({
    url: baseURL + "index.php/Project/fetchLines",
    type: 'POST',
    cache: false,
    dataType: "json",
    data: {
        lineType: line
    },
    error: function(err) {
        alert(err.statusText);
    },
    success: function(data) {

        dropdown += '<option></option>';

        $(data.lines).each(function() {
            dropdown += '<optgroup label="' + this.line + '">';
            if (this.sublines.options) {
                $(this.sublines.options).each(function() {
                    dropdown += '<option value="' + this.subLine + '">' + this.subLine + '</option>';
                });
            }

            dropdown += '</optgroup>';
        });

        $('[name=line]').empty().append(dropdown).select2("enable", true).trigger('change');

    }

});

}

我遇到的问题是JSON响应中有时没有sublines导致函数出错并且根本不显示结果。

TypeError: this.sublines is undefined

JSON响应：

 [
 {
  "line":"Business",
  "sublines":{
     "options":[
        {
           "subLine":"Accounts"
        }
     ]
  }
},
{
  "line":"Consumer",
  "sublines":{
     "options":[
        {
           "subLine":"Cause"
        },
        {
           "subLine":"Financial Services"
        }
     ]
  }
 },
 {
  "line":"Risk"
 }
]

有没有办法可以防止丢失的节点subLines破坏功能？

Answer 1

Ok, don't take it wrong, but it looks like you have no idea what you're doing. Just trying to use variables like they would be magically there.

I think this is what you're trying to do:

var dropdown = '<option></option>';

// iterate over your lines
$.each(data, function(i, line) {
  // check id there's sublines (may be needed to check if there's options too)
  if (line.sublines) {
    // start an opt group only if there's sublines
    dropdown += '<optgroup label="' + line + '">';

    // iterate over it's options
    $.each(line.sublines.options, function(j, option) {
      // add the option to the html
      dropdown += '<option value="' + option + '">' + option + '</option>';
    });

    // close the opt group
    dropdown += '</optgroup>';
  }
});

// replace the select content and trigger a change
$('[name="line"]').html(dropdown).select2('enable', true).trigger('change');

Answer 2

检查先前是否存在subLine：

if (this.sublines.options) {
            $(this.sublines.options).each(function() {
                if (this.subLine)
                    dropdown += '<option value="' + this.subLine + '">' + this.subLine + '</option>';
            });
        }

Answer 3

显然，在您的JSON响应中，并非数组中的所有对象都具有属性sublines。这就是让代码失败的一条线。

if (this.sublines.options) {

我建议通过检查它是否具有该属性来改进它：

if (this.sublines && this.sublines.options) {

Answer 4

检查首先 ...

的子行

JPanel buttons = new JPanel();
buttons.add(button1);
...

JPanel footer = new JPanel( new BorderLayout() );
footer.add(label, BorderLayout.CENTER);
footer.add(buttons, BorderLayout.LINE_END);

frame.add(footer, BorderLayout.PAGE_END);

Answer 5

我认为你想要实现这样的目标：

小提琴：https://jsfiddle.net/a3bx77vm/3/

var dropdown = '';
for(var i = 0; i < data.length; i ++)
{
    dropdown += '<option></option>';
    var eachdata = data[i];
    
    dropdown += '<optgroup label="' + eachdata.line + '">';
    
    if(eachdata.sublines)
    {
        if (eachdata.sublines.options) {
            $(eachdata.sublines.options).each(function() {
                dropdown += '<option value="' + this.subLine + '">' + this.subLine + '</option>';
            });
        }
    }
    
    dropdown += '</optgroup>';
}
$("#dropdown").append($(dropdown));

解析是错误的，因为你得到的数据是一个数组，它没有称为行的属性。

JSON响应节点的JS错误

5 个答案: