CODEWITHSUNDEEP
jqueryhtml
Varun Sridharan
Varun Sridharan

Reputation: 1978

Converting Div To Dropdown Menu

I am having 2 Div Tag Set As Below 

<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>

​

I need to convert the div which has the id newpar as a drop down menu (Select Menu). is that possible...

Upvotes: 1

Views: 3756

Answers (3)

Ram
Ram

Reputation: 144739

Try this:

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

DEMO

As IDs must be unique you can use classes instead:

<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/

Upvotes: 4

Michael Peterson
Michael Peterson

Reputation: 1123

Pure css answer: http://jsfiddle.net/Wycbd/1/

And just a couple points: id's cannot start with a number, and they have to be unique. In my fiddle, I changed the id="1" id="2" to class="one" class="two"

Upvotes: 1

Andreas
Andreas

Reputation: 21911

It's quite easy :)

$(function() {
    var id2convert = "testing2",
        divs = $("div", "#" + id2convert),
        select = $("<select id=\"" + id2convert + "\">");

    divs.each(function() {
        var text = $(this).text();
        select.append("<option value=\"" + text + "\">" + text + "</option>");
    });

    divs.parent().replaceWith(select);
})

fiddle

Upvotes: 1

Related Questions