[SOLVED] Select Option DOM?

[seventheyejosh]

Hello all, I'm used to using the DOM for text inputs, but I've never done a select creation before. Can anyone show me how to, or give me some links for learning? Google doesn't yield many results.

 

Here is an example of my current function, for text inputs. Just so you can see what I'm used to. My big thing is understanding how to create the options for the select. Is the option just a new element added to the new select element?

 

Thanks Much!

 

function add_more_subpages(){

var next_id=document.getElementById('subpage_count').value;
	next_id=(next_id*1)+1;
	document.getElementById('subpage_count').value=next_id;

var newname1='sub_template_'+next_id;
var newname2='which_'+next_id;

var div1=document.createElement('DIV');
var div2=document.createElement('DIV');
var div3=document.createElement('DIV');
var div4=document.createElement('DIV');
var input1=document.createElement('INPUT');
var input2=document.createElement('INPUT');

div1.className='pages_form_left';
div2.className='pages_form_right';
div3.className='pages_form_left';
div4.className='pages_form_right';

div1.innerHTML='Template:';
div2.id='div'+newname1;
div3.innerHTML='Which:';
div4.id='div'+newname2;

input1.setAttribute('type','text');
input2.setAttribute('type','text');
input1.setAttribute('name',newname1);
input2.setAttribute('name',newname2);
input1.setAttribute('value','');
input2.setAttribute('value',next_id);
input1.setAttribute('class','admin_input');
input2.setAttribute('class','admin_input');
input1.setAttribute('onfocus',"fill_menu('Template','Which sub template.','welcome');");
input2.setAttribute('onfocus',"fill_menu('Which','Used To Call The Subpage.','1,2,3');");

document.getElementById('more_subpages').appendChild(div1);
document.getElementById('more_subpages').appendChild(div2);
document.getElementById('more_subpages').appendChild(div3);
document.getElementById('more_subpages').appendChild(div4);

document.getElementById('div'+newname1).appendChild(input1);
document.getElementById('div'+newname2).appendChild(input2);


}//end function add_more_subpages

[gr1zzly]

Yes each 'option' would be created as a child of the new 'select' element.

[Derleek]

Not quite sure how to interpret your code...

 

But i would suggest checking out one of the many javascript frameworks out there that make tasks like this much more simple.

 

I started with mootools and still use it.  Although I am considering switching to jQuery just to have a stable user base.

 

Not positive but if you check out the docs on the $extend function you might find what you're looking for.

[seventheyejosh]

after some googling it seems like i just create the select, append it to the div, then append options to the select.

 

That i figured. The part that was getting me was the display, but it is apparently the 'text' attribute.

 

So, I just do

 

var select=document.createElement('SELECT');

var option=document.createElement('OPTION');

select.setAttribute('id','someid');

option.setAttribute('text','Display');
option.setAtrribute('value','val1');

//append to div
//append each option 

//etc

 

I guess I'll chuck it in now. As for a framework, I've been using jquery for a while, so I'll check at their DOM options.