jquery - 将 Div 转换为下拉菜单

Question

我有 2 个 Div 标签设置如下

<div id="testing1" >
   <div id="newpar" >
      <div  id="1" > 1 </div>
      <div  id="2" > 2 </div>
      <div  id="3" > 3 </div>
      <div  id="4" > 4 </div>
    </div>
</div>

<div id="testing2" >
    <div id="newpar" >
      <div  id="1" > 1 </div>
      <div  id="2" > 2 </div>
      <div  id="3" > 3 </div>
      <div  id="4" > 4 </div>
    </div>
</div>

我需要将具有 id newpar 的 div 转换为 下拉菜单(选择菜单).这可能吗...

Answer 1

试试这个:

var sel = $('<select id="tesing2"/>');
$('#testing2 div').each(function(){
    sel.append('<option value='+this.id+'>'+this.innerHTML+'</option>')
})  
$('#testing2').replaceWith(sel)  

DEMO

由于 ID 必须是唯一的，因此您可以改用类:

<div id="testing2">
    <div class="newpar">
      <div  id="1"> 1 </div>
      <div  id="2"> 2 </div>
      <div  id="3"> 3 </div>
      <div  id="4"> 4 </div>
    </div>
</div>

var sel = $('<select id="tesing"/>');
$('#testing2 > div > div').each(function(){
    sel.append('<option class='+this.parentNode.className+'>'+this.innerHTML+'</option>')
})

$('#testing2 > div').replaceWith(sel)  

http://jsfiddle.net/DdC5C/4/