1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:04 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

select option

select option

         

JuicyScript

9:51 pm on Mar 12, 2012 (gmt 0)

10+ Year Member



Hello
Please i have a javaScript which i use for my Four dropDown option.

My problem is that i want to submit the option name to the database and not the value which are numbers
Eg Instead of submitting option value 6 into the database i want certificate to be submitted.

<select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Nursing</option>
<option value="2">Allied Health</option>
</select>
<select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);"> </select>
<select id="thirdChoice" name="thirdChoice" onchange="selectChange(this, form.fourthChoice, arrItems3, arrItemsGrp3);"></select>
<select id="fourthChoice" name="fourthChoice" ></select>


Javascript code
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "Auxilary";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Basic(Diploma)";
arrItemsGrp1[4] = 1;


arrItems1[6] = "Certificate";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Diploma";
arrItemsGrp1[7] = 2;


/*arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;*/

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[101] = "Community Health Nursing";
arrItemsGrp2[101] = 3
arrItems2[102] = "Health Assistant Clinical";
arrItemsGrp2[102] = 3

arrItems2[103] = "Registered Community Health Nursing";
arrItemsGrp2[103] = 4
arrItems2[150] = "Registered General Nursing";
arrItemsGrp2[150] = 4
arrItems2[195] = "Registered Mental Nursing";
arrItemsGrp2[195] = 4
arrItems2[196] = "Registered Midwifery";
arrItemsGrp2[196] = 4

arrItems2[104] = "Community Health(FT)";
arrItemsGrp2[104] = 6
arrItems2[105] = "Environmental Health Assistant";
arrItemsGrp2[105] = 6
arrItems2[106] = "Health Records Management";
arrItemsGrp2[106] = 6
arrItems2[107] = "Optical Technician";
arrItemsGrp2[107] = 6
arrItems2[108] = "Physiotherapy/Orthotics Assistant";
arrItemsGrp2[108] = 6

arrItems2[200] = "Technical Officer Community Health(Disease Control and Surveillance)";
arrItemsGrp2[200] = 7
arrItems2[201] = "Technical Officer Community Health(Nutrition)";
arrItemsGrp2[201] = 7
arrItems2[204] = "Environmental Health Officer";
arrItemsGrp2[204] = 7
arrItems2[205] = "Technical Officer(Health Information)";
arrItemsGrp2[205] = 7
arrItems2[206] = "Technical Officer(Health Promotion and Social Marketing)";
arrItemsGrp2[206] = 7
arrItems2[207] = "Technical Officer(Medical Laboratory Technology) ";
arrItemsGrp2[207] = 7
arrItems2[208] = "Technical Officer(Dental Surgery)";
arrItemsGrp2[208] = 7
arrItems2[209] = "Community Medicine and Health(Direct Entry Medical Assistant)";
arrItemsGrp2[209] = 7

/*Edit*/
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[24] = "College Of Health Kintampo";
arrItemsGrp3[24] = 106
arrItems3[25] = "Optical Technician School(OYORKO)";
arrItemsGrp3[25] = 107
arrItems3[26] = "Physiotherapy/Orthotics Assistant School(Duayaw Nkwanta)";
arrItemsGrp3[26] = 108



arrItems3[300] = "CHNTS AKIM ODA";
arrItemsGrp3[300] = 101
arrItems3[301] = "CHNTS ESIAMA";
arrItemsGrp3[301] = 101
arrItems3[302] = "CHNTS HO ";
arrItemsGrp3[302] = 101
arrItems3[303] = "CHNTS JIRAPA";
arrItemsGrp3[303] = 101
arrItems3[304] = "CHNTS NAVRONGO";
arrItemsGrp3[304] = 101
arrItems3[305] = "CHNTS WINNEBA";
arrItemsGrp3[305] = 101
arrItems3[306] = "CHNTS FOMENA";
arrItemsGrp3[306] = 101
arrItems3[307] = "CHNTS TAMALE";
arrItemsGrp3[307] = 101
arrItems3[308] = "CHNTS BOLE";
arrItemsGrp3[308] = 101
arrItems3[309] = "CHNTS TANOSO";
arrItemsGrp3[309] = 101

arrItems3[400] = "HATS ASANKRAGUA";
arrItemsGrp3[400] = 102
arrItems3[401] = "HATS ASANTA";
arrItemsGrp3[401] = 102
arrItems3[402] = "HATS ZUARUNGU";
arrItemsGrp3[402] = 102
arrItems3[403] = "HATS DAMANGO";
arrItemsGrp3[403] = 102
arrItems3[404] = "HATS DUNKWA-ON-OFFIN";
arrItemsGrp3[404] = 102
arrItems3[405] = "HATS KETA";
arrItemsGrp3[405] = 102
arrItems3[406] = "HATS KOKOFU";
arrItemsGrp3[406] = 102
arrItems3[407] = "HATS KPEMBE";
arrItemsGrp3[407] = 102
arrItems3[408] = "HATS LAWRA";
arrItemsGrp3[408] = 102
arrItems3[409] = "HATS MAMPONG ASHANTI";
arrItemsGrp3[409] = 102
arrItems3[410] = "HATS NALERIGU";
arrItemsGrp3[410] = 102
arrItems3[411] = "HATS SEFWI WIAWSO";
arrItemsGrp3[411] = 102
arrItems3[412] = "HATS SUNYANI";
arrItemsGrp3[412] = 102
arrItems3[413] = "HATS TEPA";
arrItemsGrp3[413] = 102
arrItems3[414] = "HATS TWIFO PRASO";
arrItemsGrp3[414] = 102
arrItems3[415] = "HATS PANTANG";
arrItemsGrp3[415] = 102
arrItems3[416] = "HATS WA";
arrItemsGrp3[416] = 102
arrItems3[417] = "HATS YENDI";
arrItemsGrp3[417] = 102
arrItems3[418] = "HATS TESHIE";
arrItemsGrp3[418] = 102
arrItems3[419] = "HATS SEIKWA";
arrItemsGrp3[419] = 102


arrItems3[500] = "NTC CAPE COAST";
arrItemsGrp3[500] = 150
arrItems3[501] = "NTC KORLE-BU";
arrItemsGrp3[501] = 150
arrItems3[502] = "NTC BAWKU";
arrItemsGrp3[502] = 150
arrItems3[503] = "NTC BOLGATANGA";
arrItemsGrp3[503] = 150
arrItems3[504] = "NTC KUMASI";
arrItemsGrp3[504] = 150
arrItems3[505] = "NTC NKAWKAW (FEMALES ONLY)";
arrItemsGrp3[505] = 150
arrItems3[506] = "NTC TAMALE";
arrItemsGrp3[506] = 150
arrItems3[507] = "NTC JIRAPA";
arrItemsGrp3[507] = 150
arrItems3[508] = "NTC AGOGO";
arrItemsGrp3[508] = 150
arrItems3[509] = "NTC SDA-KWADASO";
arrItemsGrp3[509] = 150
arrItems3[510] = "NTC KOFORIDUA";
arrItemsGrp3[510] = 150
arrItems3[511] = "NTC SUNYANI";
arrItemsGrp3[511] = 150
arrItems3[512] = "NTC HO";
arrItemsGrp3[512] = 150
arrItems3[513] = "NTC BEREKUM";
arrItemsGrp3[513] = 150
arrItems3[514] = "NTC DUNKWA-ON-OFFIN";
arrItemsGrp3[514] = 150
arrItems3[515] = "NTC SEKONDI";
arrItemsGrp3[515] = 150


arrItems3[600] = "NTC ANKAFUL (MENTAL NURSING)";
arrItemsGrp3[600] = 195
arrItems3[601] = "NTC PANTANG (MENTAL NURSING)";
arrItemsGrp3[601] = 195


arrItems3[700] = "CHNTS WINNEBA";
arrItemsGrp3[700] = 103
arrItems3[701] = "CHNTS AKIM ODA";
arrItemsGrp3[701] = 103
arrItems3[702] = "CHNTS NAVRONGO";
arrItemsGrp3[702] = 103



arrItems3[800] = "MTS TWIFO PRASO";
arrItemsGrp3[800] = 196
arrItems3[801] = "MTS KORLE-BU";
arrItemsGrp3[801] = 196
arrItems3[802] = "MTS BEREKUM";
arrItemsGrp3[802] = 196
arrItems3[803] = "MTS CAPE COAST";
arrItemsGrp3[803] = 196
arrItems3[804] = "MTS SEKONDI";
arrItemsGrp3[804] = 196
arrItems3[805] = "MTS KUMASI";
arrItemsGrp3[805] = 196
arrItems3[806] = "MTS BOLGATANGA";
arrItemsGrp3[806] = 196
arrItems3[807] = "MTS MAMPONG";
arrItemsGrp3[807] = 196
arrItems3[808] = "MTS KOFORIDUA";
arrItemsGrp3[808] = 196
arrItems3[809] = "MTS JIRAPA";
arrItemsGrp3[809] = 196
arrItems3[810] = "MTS ATIBIE";
arrItemsGrp3[810] = 196
arrItems3[811] = "MTS OFFINSO";
arrItemsGrp3[811] = 196
arrItems3[812] = "MTS HOHOE";
arrItemsGrp3[812] = 196
arrItems3[813] = "MTS TAMALE";
arrItemsGrp3[813] = 196
arrItems3[814] = "MTS TEPA";
arrItemsGrp3[814] = 196
arrItems3[815] = "MTS TARKWA";
arrItemsGrp3[815] = 196


arrItems3[6] = " College Of Health Kintampo";
arrItemsGrp3[6] = 104
arrItems3[80] = "School Of Hyiene Tamale";
arrItemsGrp3[80] = 105
arrItems3[81] = "School Of Hyiene Ho";
arrItemsGrp3[81] = 105


arrItems3[100] = "College of Health Kintampo";
arrItemsGrp3[100] = 200
arrItems3[101] = "College of Health Kintampo";
arrItemsGrp3[101] = 201
arrItems3[102] = "College of Health Kintampo";
arrItemsGrp3[102] = 203
arrItems3[103] = "School Of Hygiene - Korle Bu";
arrItemsGrp3[103] = 204
arrItems3[104] = "College of Health Kintampo";
arrItemsGrp3[104] = 205
arrItems3[105] = "College of Health Kintampo";
arrItemsGrp3[105] = 206
arrItems3[106] = "College of Health Kintampo";
arrItemsGrp3[106] = 207
arrItems3[107] = "College of Health Kintampo";
arrItemsGrp3[107] = 208
arrItems3[108] = "College of Health Kintampo";
arrItemsGrp3[108] = 209



function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ ) {
if ( GroupArray[x] == control.value ) {
myEle = document.createElement("option") ;
//myEle.value = x ;
myEle.setAttribute('value',x);
// myEle.text = ItemArray[x] ;
var txt = document.createTextNode(ItemArray[x]);
myEle.appendChild(txt)
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
}
}
}

function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle=document.createElement("option");
theText=document.createTextNode("[SELECT]");
myEle.appendChild(theText);
myEle.setAttribute("value","0");
controlToPopulate.appendChild(myEle);
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ ) {
if ( GroupArray[x] == control.value ) {
myEle = document.createElement("option") ;
//myEle.value = x ;
myEle.setAttribute("value",x);
// myEle.text = ItemArray[x] ;
var txt = document.createTextNode(ItemArray[x]);
myEle.appendChild(txt)
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
}
}
}
// -->

daveVk

11:18 pm on Mar 12, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try Changing
myEle.setAttribute("value",x);
to
myEle.setAttribute("value",ItemArray[x]);

JuicyScript

11:42 pm on Mar 12, 2012 (gmt 0)

10+ Year Member



I tried that but didnt work.Still getting the number s

daveVk

2:49 am on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First only need one function selectChange so delete second copy, and ensure remaining copy includes suggested change.

Inspect generated HTML and look for
<option value="Certificate"
vs
<option value="6"
How you do that depends on the browser and tools you are using, check all view source options you have available.

JuicyScript

4:39 am on Mar 13, 2012 (gmt 0)

10+ Year Member



Dave can you give me an example because am finding it difficult to understand(Am new at this) and when i change the
myEle.setAttribute("value",x);
to
myEle.setAttribute("value",ItemArray[x]);
it messes up my selection.

JuicyScript

4:39 am on Mar 13, 2012 (gmt 0)

10+ Year Member



Dave can you give me an example because am finding it difficult to understand(Am new at this) and when i change the
myEle.setAttribute("value",x);
to
myEle.setAttribute("value",ItemArray[x]);
it messes up my selection.

daveVk

5:10 am on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



My understanding of the problem is that original generated for example

<option value="6" >Certificate</option>

that will return 6 to the server when "Certificate" is selected

if you wish to return the word "Certificate" rather than 6 it needs to be

<option value="Certificate" >Certificate</option>

You original post contained

function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
var myEle ;
... lines removed ...
}

function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
var myEle ;
... lines removed ...
}

There is no point in having 2 functions with same name, as only the last will be used. Delete one.

it messes up my selection.

In what way ?

JuicyScript

5:44 am on Mar 13, 2012 (gmt 0)

10+ Year Member



When i replace myEle.setAttribute("value",x);
with
myEle.setAttribute("value",ItemArray[x]);
the third and fourth selections are unable to populate.It there another way?

daveVk

6:25 am on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Changing control.value to text has broken this line, GroupArray[x] is a number and control.value is NOW Text

if ( GroupArray[x] == control.value ) {

try replacing with

if ( ItemArray[x] == control.value ) {

there may well be other broken stuff.

JuicyScript

10:00 am on Mar 13, 2012 (gmt 0)

10+ Year Member



Hi Dave
This time three dropdown selection could not be populated
Can we try something else please

Fotiman

1:45 pm on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




My problem is that i want to submit the option name to the database and not the value which are numbers
Eg Instead of submitting option value 6 into the database i want certificate to be submitted.

If that is what you want, then just change your <option> tags to include "certificate" as the value instead of "6". That is the correct solution to this problem, as another other solution will fail if JavaScript is disabled.

Fotiman

2:20 pm on Mar 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Looking more closely, I see that it's already a JavaScript-only solution. I think the problem is that you are storing your data in a very arbitrary data structure and then trying to link them all together in a very complex way. It looks to me as though you could better represent this data as a tree or linked list. You need to clean up and simplify the way you are linking your data first.

daveVk

12:43 am on Mar 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Other options are to convert the numbers to text as part of the submit process, or to do the conversion in the server.

What javascript if any is attached to the submit button or the form onsubmit method ?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:04 pm May 13, 2026