将HTML选择器转换为对象

-1

我正在创建一个将HTML选择器转换为可自定义菜单的脚本。我需要从我的HTML中返回一个嵌套对象（如图2）。将HTML选择器转换为对象

即返回此图1

<select id="orderBy">     
    <option value="order-by=newest&">newest</option> 
    <option value="order-by=relevance&">relevance</option> 
</select> 
<select id="searchBy">     
    <option value="search-by=name&">name</option> 
    <option value="search-by=number&">number</option> 
</select>

作为对象，像这样：图2

selectors = [  
    {"id":"orderBy", "options" : [ 
     {"value":"search-by=newest&", "name":"search-by=relevance&"} 
    ]}, 
    {"id":"searchBy", "options" : [ 
     {"value":"search-by=name&", "name":"search-by=number&"} 
    ]} 
];

到目前为止我的代码，虽然这是行不通的。

var selector = new Object; 

//Find all select boxes and push their ID's' into selector 
$("#filter").find("select").map(function(i){ 
    selector[i] = this.id; 
}); 

//Find all select boxes and push their ID's' into selector 
$("#" + selector[i]).find("option").map(function(i){ 
    optionText[i] = $(this).text(); 
    optionValue[i] = $(this).val(); 
});

摘要

上面的代码返回

Object {0: "orderBy", 1: "searchBy"}.

我在做什么错？

来源

2016-11-13 Elliott James

更高层次的目标似乎仍然过于宽泛。不清楚您的意思是整页还是只是特定的标签或页面的特定部分。在第二个代码片段中，“i”显然是未定义的，但如果您对创建的对象感到满意，则不清楚。总之......你应该更具体地说明你的问题 – charlietfl

@charlietfl - 我已经编辑了这个问题，希望能缩小这个问题的范围。谢谢。 –

为了使用map()创建一个数组，您需要在回调中返回一个对象。

你可能想要的东西更像

var data = $('#container select').map(function(){ 
    // create array of option objects for this select instance 
    var opts = $(this).children().map(function(){ 
     // return an object for each element of array 
    return{ 
     text: $(this).text(), 
     value: this.value 
    } 
    }).get(); 
    // now an object for this select instance 
    var obj={ 
    id:  this.id, 
    options: opts // array from above 
    } 
    return obj; 

}).get();

DEMO

来源

2016-11-13 21:31:36 charlietfl

这是一个非常好的答案，谢谢。虽然我会解决你的答案，但我有兴趣知道.map（）或.serializeArray（）;是更好的方式去？自发布问题以来，我一直在阅读它。 –

一切都取决于目前还不清楚的目标。 'serializeArray（）'只会返回每个选择的名称和当前值 – charlietfl

最终，我正在尝试创建一个脚本，将

将HTML选择器转换为对象

回答