Populating a text field with the text (not value) of a select box

Question

I currently have the value of a select box (id=title) populating a text field (id=costcenter). When I use the VALUE of the select box to trigger the population of the cost center field it works fine. But I need to use the TEXT of the select box, not the value.

Here's my current code. How can I use the TEXT of the drop down (not the VALUE) to trigger the population of the cost center field.

Thanks everyone! Rick

JAVASCRIPT:

<script language="Javascript">
var com_costcenter = new Array();

com_costcenter["Assistant Director"] = "2043000010";
com_costcenter["Clinical Specialist"] = "2044600011";
com_costcenter["Clinical Apps"] = "2044600011";
com_costcenter["select"] = "";

function setTitle(){
  var text = document.getElementsByName('title')[0].options[document.getElementsByName('title')[0].selectedIndex].value;
  document.getElementsByName('costcenter')[0].value = com_costcenter[text];
}
</script>

HTML:

<select name="title" id="title" onchange="setTitle()">
<option value="Assistant Director">Assistant Director - 2043000010</option>
<option value="Clinical Specialist">Clinical Specialist - 2044600011</option>
<option value="Clinical Apps">Clinical Applications - 2044600011</option>
</select>


<input name="costcenter" type="text" id="costcenter" size="10" maxlength="10" pattern="\d{10}" title="Enter exactly 10 digits"/>

Answer 1

Try out .innerHTML

 var com_costcenter = new Array(); com_costcenter["Assistant Director"] = "2043000010"; com_costcenter["Clinical Specialist"] = "2044600011"; com_costcenter["Clinical Apps"] = "2044600011"; com_costcenter["select"] = ""; function setTitle(){ var title = document.getElementsByName('title')[0]; var text = title.options[title.selectedIndex].innerHTML; var number = text.split(" - ")[1]; document.getElementsByName('costcenter')[0].value = number; }

 <select name="title" id="title" onchange="setTitle()"> <option value="Assistant Director">Assistant Director - 2043000010</option> <option value="Clinical Specialist">Clinical Specialist - 2044600011</option> <option value="Clinical Apps">Clinical Applications - 2044600011</option> </select> <input name="costcenter" type="text" id="costcenter" size="25" maxlength="10" pattern="\\d{10}" title="Enter exactly 10 digits"/>

Answer 2

I don't exactly understand what you're looking for, but I think this may be helpful.

<script language="Javascript">
function setTitle(){
    Title = document.getElementById('title');
    TitleText   = Title.options[Title.selectedIndex].text;
    TitleNumber = TitleText.split(" - ")[1];
    document.getElementsByName('costcenter')[0].value = TitleNumber;
}
</script>