how can i modifie the options of select

@chahbandarMar 18.2009

how can i modifie the options of select
Hi,

I am stuck with a problem ….

A user is face with two selections institute and chain ,

<SELECT ID=”INSTITUTE” onChange=”check()”>
<OPTION SELECTED=”TRUE” VALUE=””>– Please Select Institute –</OPTION>
<OPTION VALUE=”ISIMS”>ISIMS</OPTION>
<OPTION VALUE=”ISGI”>ISGI</OPTION>
</SELECT>

<SELECT ID=”CHAIN” >
<OPTION SELECTED=”TRUE” VALUE=””>– Please Select Chain–</OPTION>
<OPTION VALUE=”MICE”>MICE</OPTION>
<OPTION VALUE=”MIM”>MIM</OPTION>
</SELECT>

So before the user can submit the selection i have a check, because if the user has selected “ISIMS”, then the selection CHAIN should have as options MIM and MICE ,else if the user has selected “ISGI”, then the selection CHAIN should have as options IGI and ERE.it means that it depend on the institute.

I wish there was a simple function like get but set (setElementById) something on the lines of: setElementById(institute).option[0].value = “MIM”
But as far as I am aware there is none…is there a way on setting the option value of the select menu!

to post a comment

JavaScript

11 Comments(s) _↴

@chahbandarauthorMar 18.2009 — #how can i modifie the options of select

Hi,

I am stuck with a problem ....

A user is face with two selections institute and chain ,

<SELECT ID="INSTITUTE" onChange="check()">

<OPTION SELECTED="TRUE" VALUE="">-- Please Select Institute --</OPTION>

<OPTION VALUE="ISIMS">ISIMS</OPTION>

<OPTION VALUE="ISGI">ISGI</OPTION>

</SELECT>

<SELECT ID="CHAIN" >

<OPTION SELECTED="TRUE" VALUE="">-- Please Select Chain--</OPTION>

<OPTION VALUE="MICE">MICE</OPTION>

<OPTION VALUE="MIM">MIM</OPTION>

</SELECT>

So before the user can submit the selection i have a check, because if the user has selected "ISIMS", then the selection CHAIN should have as options MIM and MICE ,else if the user has selected "ISGI", then the selection CHAIN should have as options IGI and ERE.it means that it depend on the institute.

I wish there was a simple function like get but set (setElementById) something on the lines of: setElementById(chain).option[1].value = "MIM"

But as far as I am aware there is none...is there a way on setting the option value of the select menu![/QUOTE]

I hope that you can help me.

@JMRKERMar 18.2009 — #This example uses radio buttons for the first choice (ISIMS and ISGI)

to setup the correct drop-down displays,

and it has 3 selectbox options instead of 2 in your request (MICE and MIM),

but it can be easily modified if you really need two drop-down select boxes.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Limit Selections&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;input type="radio" name="first" value="1" onclick="choice(this)"&gt;A
 &lt;input type="radio" name="first" value="2" onclick="choice(this)"&gt;B
 &lt;input type="radio" name="first" value="3" onclick="choice(this)"&gt;C
 &lt;br&gt;
 
 &lt;select id='second'&gt;
 &lt;/select&gt;
 &lt;script type="text/javascript"&gt;
 // From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&amp;t=163152
 //    For: http://www.webdeveloper.com/forum/newreply.php?do=postreply&amp;t=204828
 
 function choice(t){
 var a = [1,2,3];
 var b = [4,5,6,7];
 var c = [8,9,10];
 s = document.getElementById('second');
 var sl = s.options.length;
 for(var i = sl-1; i &gt;= 0 ; i--) { s.options[i] = null; }
 if(t.value != 0){
 var z;
 switch (t.value) {
 case '1' : z = a; break;
 case '2' : z = b; break;
 case '3' : z = c; break;
 default : alert('Invalid entry'); break;
 }
 var l = z.length;
 for(i = 0; i &lt; l; i++ ) { s.options[i] = new Option(z[i],z[i],false,false); }
 }
 }
 
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Post back with an attempt if you like the idea and need further help.

?

@JMRKERMar 18.2009 — #Here's how to modify to use your information:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Dual Selections&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 // From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&amp;t=163152
 //    For: http://www.webdeveloper.com/forum/newreply.php?do=postreply&amp;t=204828
 
 <i>	</i>var a = ['|-- Please Select --','|MIM','|MICE'];	// automatic value assignments
 <i>	</i>var b = ['|-- Please Select --','123|IGI','456|ERE']; 	// demonstration of value assignments
 
 function choice(IDS,t){
 s = document.getElementById(IDS);
 for(var i = s.options.length; i &gt;= 0 ; i--) { s.options[i] = null; }
 if(t != 0){
 var z = [];
 switch (t) {
 case '1' : z = a; break;
 case '2' : z = b; break;
 default : alert('Invalid entry: '+IDS+' : '+t+'nn'+z); break;
 }
 var tmp = [];
 for(i = 0; i &lt; z.length; i++ ) {
 tmp = z[i].split('|')
 if (tmp[0] == '') { tmp[0] = tmp[1]; }
 s.options[i] = new Option(tmp[1],tmp[0],false,false);
 }
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;SELECT id="INSTITUTE" onChange="choice('CHAIN',this.value)"&gt;
 &lt;option value="0"&gt;-- Please Select --&lt;/option&gt;
 &lt;option value="1"&gt;ISIMS&lt;/option&gt;
 &lt;option value="2"&gt;ISGI&lt;/option&gt;
 &lt;/SELECT&gt;
 
 &lt;!-- onChange below only for testing purposes -- not needed --&gt;
 &lt;SELECT id="CHAIN" onChange="alert('Value: '+this.value)"&gt;&lt;/SELECT&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@Farel321Mar 18.2009 — #You can always use DOM to adjust the values.... for instance...

In this piece of code the nodes variable is the array:

[0] -> <OPTION SELECTED="TRUE" VALUE="">-- Please Select Chain--</OPTION>

[1] -> <OPTION VALUE="MICE">MICE</OPTION>

[2] -> <OPTION VALUE="MIM">MIM</OPTION>

[CODE]
 var institute = document.getElementById('INSTITUTE');
 var nodes = document.getElementById('CHAIN').childNodes;
 
 if(institute.value="ISIMS")
 {
 nodes[1].value="MIM";
 nodes[2].value="MICE";
 nodes[1].innerHTML = "MIM";
 nodes[2].innerHTML = "MIM";
 }
 else if(institute.value="ISGI")
 {
 nodes[1].value="IGI";
 nodes[2].value="ERE";
 nodes[1].innerHTML = "IGI";
 nodes[2].innerHTML = "ERE";
 }
 [/CODE]

@JMRKERMar 18.2009 — #You can always use DOM to adjust the values.... for instance...
[/QUOTE]

That will work so long as the user never changes the number of options anywhere.

Might get a little messy with odd assignments.

@Farel321Mar 18.2009 — #The man has a point very true... I was just assuming you'd be stuck with 2 options. If you did on the other hand want to make more you can always wipe the select's option list and then re-make them.

Something kind of like this

[CODE]
 var chain = document.getElementById('CHAIN');
 while(chain.hasChildNodes())
 chain.removeChild(chain.lastChild);
 
 var i;
 var option_values= new Array('My value 1', 'My value 2','etc.');
 for(i=0;i<option_values.length;i++)
 {
 var newOption = document.createElement('option');
 newOption.value = option_values[i];
 newOption.innerHTML = option_values[i];
 chain.appendChild(newOption);
 }
 [/CODE]

@JMRKERMar 18.2009 — #The man has a point very true... I was just assuming you'd be stuck with 2 options. If you did on the other hand want to make more you can always wipe the select's option list and then re-make them.
[/QUOTE]

Which is exactly what the

function choice(IDS,t){

....

}

function is doing. ?

Just another way to do the same thing.

Like PERL, TMTOWTDI

(there's more than one way to do it.)

@chahbandarauthorMar 19.2009 — #Thank you so much!! That works perfectly! I have been frustrated all morning trying to do this and was starting to despair....

Thank you again..it is much appreciated!

Excuse me,just one more question:

How to incorporate these options from a database in a JavaScript code ?

I mean can i integrate a PHP code in a JavaScript code ?

@chahbandarauthorMar 19.2009 — #Here's how to modify to use your information:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Dual Selections&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 // From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&amp;t=163152
 //    For: http://www.webdeveloper.com/forum/newreply.php?do=postreply&amp;t=204828
 
 <i>	</i>var a = ['|-- Please Select --','|MIM','|MICE'];	// automatic value assignments
 <i>	</i>var b = ['|-- Please Select --','123|IGI','456|ERE']; 	// demonstration of value assignments
 
 function choice(IDS,t){
 s = document.getElementById(IDS);
 for(var i = s.options.length; i &gt;= 0 ; i--) { s.options[i] = null; }
 if(t != 0){
 var z = [];
 switch (t) {
 case '1' : z = a; break;
 case '2' : z = b; break;
 default : alert('Invalid entry: '+IDS+' : '+t+'nn'+z); break;
 }
 var tmp = [];
 for(i = 0; i &lt; z.length; i++ ) {
 tmp = z[i].split('|')
 if (tmp[0] == '') { tmp[0] = tmp[1]; }
 s.options[i] = new Option(tmp[1],tmp[0],false,false);
 }
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;SELECT id="INSTITUTE" onChange="choice('CHAIN',this.value)"&gt;
 &lt;option value="0"&gt;-- Please Select --&lt;/option&gt;
 &lt;option value="1"&gt;ISIMS&lt;/option&gt;
 &lt;option value="2"&gt;ISGI&lt;/option&gt;
 &lt;/SELECT&gt;
 
 &lt;!-- onChange below only for testing purposes -- not needed --&gt;
 &lt;SELECT id="CHAIN" onChange="alert('Value: '+this.value)"&gt;&lt;/SELECT&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[/QUOTE]

thank you verry much .

var a = ['|-- Please Select --','|[COLOR="Red"]MIM[/COLOR]','|[COLOR="Red"]MICE[/COLOR]'];

if I want to take these data(MIM,MICE) from a database, how should I do?

it means can i integrate PHP tags in the JavaScript code?

thanks a lot?

@JMRKERMar 19.2009 — #I don't know enough PHP to answer your question.

Perhaps another forum member will know this.

If not, try posting to the PHP forum section and see if the experts there know how to do what you want.

Post back here if you get an answer as I'm sure there is an answer out there somewhere!

(Shades of the "X-Files" ?)

@Farel321Mar 19.2009 — #To take information from a database you're gonna have to use an xmlHttpRequest (look up at w3schools.com). Basically what that allows you to do is access a php script via javascript. Your php script will have to echo the new options and then when you retrieve them with javascript you can do as you please.

Also in #JavaScript _↴

Sorry Switching letters calling a command with combined strings from drop down box

Success!

Help @chahbandar spread the word by sharing this article on Twitter...

Tweet This

how can i modifie the options of select

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

how can i modifie the options of select

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴