Jump to content

[SOLVED] Select Option DOM?


seventheyejosh

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.