Jquery从Json数据构建链接

老实说，这是我问问题的最后手段。我花了很多时间在这上面，我觉得我已经快到了，但也许现在

任何帮助都是非常感谢的

我有Json格式的数据，并希望创建一个选项选择如下

预期的HTML

<select>
<option value="/">Home</option>
<option value="/about">About></option>
<option value="/about/contact">About/Contact</option>
<option value="/about/contact/contact2">About/Contact/Contact2</option>
<option value="/fr/sur">fr/Sur</option>
.......
</select>

} ];

var links={！！str\u replace（“'”，“\'”，json\u encode（$pages））！！}；
功能构建菜单（数据）{
var menu=document.createElement（'option'）；//创建
元素
对于（var i=0；i，使用递归可以解决此问题

<select class="test"></select>


<script>

var links = [
   {
      "id":1,
      "name":"index",
      "slug":"index",
      "parent_id":"0",
      "status":1,
      "multilangual":"en",
      "children":[

      ]
   },
   {
      "id":18,
      "name":"About",
      "slug":"about",
      "parent_id":"1",
      "multilangual":"en",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   },
   {
      "id":19,
      "name":"Sur",
      "slug":"sur",
      "parent_id":"1",
      "multilangual":"fr",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   },
   {
      "id":20,
      "name":"Contact",
      "slug":"contact",
      "parent_id":"1",
      "multilangual":"en",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   }
];

var control =$(".test");

function createLinks(options,prefix,isChildren){
    $.each(options, function (index, item) {
  var value="";
  var text="";
            if(item.multilangual =="fr" && !isChildren){
                value="/fr"+ prefix+"/"+item.slug;
                text="fr"+ prefix+"/"+item.name;
            }else{
                value=prefix+"/"+item.slug;
                text=prefix+"/"+item.name;
                text=text.substr(1);
            }

            control.append(
                $('<option>', {
                    value: value,
                    text: text
                }, '</option>'));

            if(item.children.length>0){
                createLinks(item.children,value,true);
            }
        });

};
createLinks(links,"",false);

</script>


变量链接=[
{
“id”：1，
“名称”：“索引”，
“slug”：“index”，
“父项id”：“0”，
“地位”：1，
“多语言”：“en”，
“儿童”：[
]
},
{
“id”：18，
“姓名”：“关于”，
“鼻涕虫”：“关于”，
“家长id”：“1”，
“多语言”：“en”，
“儿童”：[
{
“id”：1，
“名称”：“索引”，
“slug”：“index”，
“父项id”：“0”，
“多语言”：“en”，
“儿童”：[
]
}
]
},
{
“id”：19，
“姓名”：“苏尔”，
“鼻涕虫”：“苏尔”，
“家长id”：“1”，
“多语言”：“fr”，
“儿童”：[
{
“id”：1，
“名称”：“索引”，
“slug”：“index”，
“父项id”：“0”，
“多语言”：“en”，
“儿童”：[
]
}
]
},
{
“id”：20，
“姓名”：“联系人”，
“slug”：“contact”，
“家长id”：“1”，
“多语言”：“en”，
“儿童”：[
{
“id”：1，
“名称”：“索引”，
“slug”：“index”，
“父项id”：“0”，
“多语言”：“en”，
“儿童”：[
]
}
]
}
];
风险值控制=$（“.test”）；
函数createLinks（选项、前缀、isChildren）{
$。每个（选项、功能（索引、项目）{
var值=”；
var text=“”；
if（item.multilangual==“fr”&&&！isChildren）{
value=“/fr”+前缀+“/”+item.slug；
text=“fr”+前缀+“/”+item.name；
}否则{
值=前缀+“/”+项.slug；
text=前缀+“/”+item.name；
text=text.substr（1）；
}
control.append(
$('', {
价值：价值，
文本：文本
}, ''));
if（item.children.length>0）{
createLinks（item.children，value，true）；
}
});
};
createLinks（links，”，false）；
为什么链接作为不同选项的值存在？目的是什么？请分享预期的html输出。它们来自一个laravel平台，每个代表一个页面。我删除了此演示的一些数据。该平台可以创建许多页面。我需要将其作为一个选项，以便在生成器中使用。但是Jquery不是我的强项最强大的力量。@harsh_apache请看这篇文章的开头。我给它添加了一个标题。我对这个“关于/联系”感到困惑。我认为这个应该像这个“联系”一样出现
<div class="test"></div>

<script>

 var links = {!! str_replace("'", "\'", json_encode($pages)) !!};


 function buildMenu(data){

  var menu = document.createElement('option'); // createing <ul> element

  for(var i=0; i<data.length; i++){ // processing array
    var link = data[i];

     var a  = document.createElement('a');  // creating <a> element
    a.className += link.icon; // adding multiple classes to <a> element
    a.setAttribute('href', link.slug); // setting [href] attribute
    a.innerText = link.name; // setting text

        menu.appendChild(a);

        if(link.children){ // checking childrens (you dont need to creating Count function, all JS arrays has property length (example: links.length))
              var subMenu = getChildren(link.children); // creating submenu
              var _href = a.getAttribute("href"); 
               a.setAttribute("href", subMenu + '/' + _href);
        }
  }
  function getChildren(data){
            for(var i=0; i<data.length; i++){ // processing array
            var link = data[i];
            var href =  link.slug; 
    }
    return href;
}
  return menu;
}

var div  = document.querySelector('div.test') // getting your div
var menu = buildMenu(links); // build menu
div.appendChild(menu) // append menu to your div

</script>

<select class="test"></select>


<script>

var links = [
   {
      "id":1,
      "name":"index",
      "slug":"index",
      "parent_id":"0",
      "status":1,
      "multilangual":"en",
      "children":[

      ]
   },
   {
      "id":18,
      "name":"About",
      "slug":"about",
      "parent_id":"1",
      "multilangual":"en",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   },
   {
      "id":19,
      "name":"Sur",
      "slug":"sur",
      "parent_id":"1",
      "multilangual":"fr",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   },
   {
      "id":20,
      "name":"Contact",
      "slug":"contact",
      "parent_id":"1",
      "multilangual":"en",
      "children":[
         {
            "id":1,
            "name":"index",
            "slug":"index",
            "parent_id":"0",
            "multilangual":"en",
            "children":[

            ]
         }
      ]
   }
];

var control =$(".test");

function createLinks(options,prefix,isChildren){
    $.each(options, function (index, item) {
  var value="";
  var text="";
            if(item.multilangual =="fr" && !isChildren){
                value="/fr"+ prefix+"/"+item.slug;
                text="fr"+ prefix+"/"+item.name;
            }else{
                value=prefix+"/"+item.slug;
                text=prefix+"/"+item.name;
                text=text.substr(1);
            }

            control.append(
                $('<option>', {
                    value: value,
                    text: text
                }, '</option>'));

            if(item.children.length>0){
                createLinks(item.children,value,true);
            }
        });

};
createLinks(links,"",false);

</script>