Question

我这里有一个真正的头脑。我使用.tmpl来创建分层下拉组合框的内容。当我使用数据和模板来创建嵌套的div时，tmpl库工作得非常好。

但是当我使用一个非常相似的模板创建选择组和选项时，它们最终没有正确嵌套。

HTML看起来像这样：

<div id="MySelect">
</div>
<select id="MySelectData" style='display: none;'>
</select>
<br />
<div id="MyDiv">
</div>
<script id="MyTemplate" type="text/x-jquery-tmpl">
    {{if children}}
    <optgroup label='${data}'>
        {{tmpl(children) "#MyTemplate"}}
    </optgroup> 
    {{else}}
    <option label='${data}'>
        ${data}
    </option>
    {{/if}}
</script>
<script id="MyDump" type="text/x-jquery-tmpl">
    {{if children}}
    <div style="padding: 5px 5px 5px 5px;">
        ${data}
        {{tmpl(children) "#MyDump"}}
    </div> 
    {{else}}
    <div style="padding: 5px 5px 5px 5px;">
        ${data}
    </div>
    {{/if}}
</script>

和jQuery（包括数据）：

var data = [{
    "data": "Corporate",
    "children": [{
        "data": "Division A",
        "children": [{
            "data": "Department AA",
            "children": [{
                "data": "Product AA1"},
            {
                "data": "Product AA2"}]},
        {
            "data": "Department AB",
            "children": [{
                "data": "Product AB1"}]},
        {
            "data": "Department AC",
            "children": [{
                "data": "Product AC1"},
            {
                "data": "Product AC2"},
            {
                "data": "Product AC3"},
            {
                "data": "Product AC4"}]}]},
    {
        "data": "Division B",
        "children": [{
            "data": "Department BA",
            "children": [{
                "data": "Product BA2"},
            {
                "data": "Product BA`1"}]},
        {
            "data": "Department BB",
            "children": [{
                "data": "Product BB1"},
            {
                "data": "Product BB2"},
            {
                "data": "Product BB3"}]}]},
    {
        "data": "Division C",
        "children": [{
            "data": "Department CA",
            "children": [{
                "data": "Product CA1"}]}]}]}];
$("#MyTemplate").tmpl(data).appendTo('#MySelectData');
$('#MySelect').combo({
    selectId: 'MySelectData',
    editable: false,
    width: 150
});
$("#MyDump").tmpl(data).appendTo('#MyDiv');

这些插件：

Answer 1

您正在尝试嵌套<optgroup>元素，但这是无效的HTML。 HTML-5 has this to say about <optgroup>：

可以使用此元素的上下文：
  作为select元素的孩子。
  内容模型：
  零个或多个option元素。

HTML-4 has this to say：

在HTML 4中，必须在OPTGROUP元素中直接指定所有SELECT元素（即，组可能不会嵌套）。

因此，您为浏览器提供了无效的HTML，并且浏览器正在尝试通过取消无效嵌套的<optgroup>元素来纠正它。浏览器完成HTML修正后，您的嵌套就会消失，并获得您所看到的奇怪行为。

你是如何解决这个问题的？您可以在JavaScript版本中使用嵌套的<ul>（在隐藏的<div>内），在非JavaScript版本中使用完全不同的<select>而不使用嵌套的<optgroup>元素。您还可以尝试使用额外的深度属性来玩技巧，这样您的JavaScript就可以重建嵌套（我以前做过这个，并不意味着它是一个好主意，只是有可能）。

奇怪的jquery .tmpl递归

1 个答案: