How to expand drop down list on focus or select

I have a drop down and am limited on space and would like to achieve this: The drop down would show 2 character codes, like states or abbreviations or whatever, but be 2 characters. Then when someone sets focus or selects the drop down, then the user would see a full description of the 2 character code and then when then they tab or focus off the drop down, then it would go back to the 2 character code. Also I would like the descriptions to be where the codes are in the drop down list, not like a hover text or tooltip for the description
PdesignzPPC SpecialistAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<script type="text/javascript">
function show(sel,mode)
{
	for( var i=0, limit=sel.options.length; i < limit; ++i)
	{
		var temp = sel.options[i].text;
		sel.options[i].text= sel.options[i].value;
		sel.options[i].value=temp;
	}
}
</script>
</head>
<body>
<select onfocus="show(this,'long')" onblur="show(this,'short')">
	<option value="California">CA</option>
	<option value="Ohio">OH</option>
</select>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hieloCommented:
glad to help
0
PdesignzPPC SpecialistAuthor Commented:
Hielo,

Do you think that it would be possible to open a new window on focus and then close on blur or tab off, some of the descriptions are quite long and pushing div/table out past dimensions of structure

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<script type="text/javascript">
function show(sel,mode)
{
        for( var i=0, limit=sel.options.length; i < limit; ++i)
        {
                var temp = sel.options[i].text;
                sel.options[i].text= sel.options[i].value;
                sel.options[i].value=temp;
        }
}
</script>
</head>
<body>
<!--<select onfocus="show(this,'long')" onblur="show(this,'short')">
        <option value="" selected></option>
        <option value="California">CA</option>
        <option value="Ohio">OH</option>
</select>
 -->
 <div class="group_bottom" style="float:left;">
          <table cellpadding="1" cellspacing="1" class="dataTable">
            <tr>
              <td class="dataHeader">Claim Details</td>
            </tr>
          </table>
          <div style="float:left; width:860px;">
            <table id="details01" cellspacing="1" cellpadding="1" style="width:860px;">
        <tr>
          <td class="ub04_label">Special Program Indicator</td>
              <td class="ub04_label">EOB</td>
              <td class="ub04_label">Delay Reason Code</td>
              <td class="ub04_label">Provider/Supplier</td>
              <td class="ub04_label">Medicare Assignment</td>
            </tr>
        <tr>
          <td><select name="select12" id="select12">
            <option value="null" selected="selected"></option>
            <option>01 Early &amp; Periodic Screening</option>
            <option>02 Handicapped Children&rsquo;s Program</option>
            <option>03 Special Federal Funding</option>
            <option>05 Disability</option>
            <option>07 Induced Abortion - Danger to Life</option>
            <option>08 Induced Abortion - Rape or Incest</option>
            <option>09 Second Opinion or Surgery</option>
            </select></td>
              <td><select name="select12" id="select13">
                  <option value="null" selected="selected"></option>
                  <option>NO</option>
                  <option>YES</option>
              </select></td>
              <td><select name="select12" id="select14">
                  <option value="null" selected="selected"></option>
                  <option>Proof of Eligibility</option>
                  <option>Litigation</option>
                  <option>Authorization Delays</option>
                  <option>Certifying Provider</option>
                  <option>Supplying Billing Forms</option>
                  <option>Delivery</option>
                  <option>Third Party Processing</option>
                  <option>Eligibility Determination</option>
                  <option>Original Claim Rejected</option>
                  <option>Administration Delay</option>
                  <option>Other</option>
              </select></td>
              <td><select name="select12" id="select15">
                  <option value="null" selected="selected"></option>
                  <option>NO</option>
                  <option>YES</option>
              </select></td>
              <td><select name="select12" id="select16">
                  <option value="null" selected="selected"></option>
                  <option>Assigned</option>
                  <option>Not Assigned</option>
              </select></td>
            </tr>
        <tr>
          <td class="ub04_label">Document Control ID</td>
              <td class="ub04_label">Peer Review Auth #</td>
              <td class="ub04_label">Adjusted Repriced Claim Ref #</td>
              <td class="ub04_label">Investigational Device Exemption #</td>
              <td class="ub04_label">Clearinghouse Trace #</td>
            </tr>
        <tr>
          <td><input type="text" name="textfield2" id="textfield2" tabindex="410" /></td>
              <td><input type="text" name="textfield2" id="textfield3" tabindex="411" /></td>
              <td><input type="text" name="textfield2" id="textfield4" tabindex="412" /></td>
              <td><input type="text" name="textfield2" id="textfield5" tabindex="413" /></td>
              <td><input type="text" name="textfield2" id="textfield6" tabindex="414" /></td>
            </tr>
        <tr>
          <td class="ub04_label">Demonstration Project ID</td>
              <td class="ub04_label">Fixed Format Info</td>
              <td class="ub04_label">Note Reference Code</td>
              <td class="ub04_label">Claim Note Text</td>
              <td class="ub04_label">&nbsp;</td>
            </tr>
        <tr>
          <td><input type="text" name="textfield2" id="textfield7" tabindex="415" /></td>
              <td><input type="text" name="textfield2" id="textfield16" tabindex="416" /></td>
              <td><select onfocus="show(this,'long')" onblur="show(this,'short')">
                  <option value="" selected></option>
                  <option value="Allergies">ALG</option>
                  <option value="Goals, Rehabilitation Potential, or Discharge Plans">DCP</option>
                  <option value="Diagnosis Description">DGN</option>
                  <option value="Durable Medical Equipment (DME) and Supplies">DME</option>
                  <option value="Medications">MED</option>
                  <option value="Nutritional Requirements">NTR</option>
                  <option value="Orders for Disciplines and Treatments">ODT</option>
                  <option value="Functional Limitations, Reason Homebound, or Both">RHB</option>
                  <option value="Reasons Patient Leaves Home">RLH</option>
                  <option value="Times and Reasons Patient Not at Home">RNH</option>
                  <option value="Unusual Home, Social Environment, or Both">SET</option>
                  <option value="Safety Measures">SFM</option>
                  <option value="Supplementary Plan of Treatment">SPT</option>
                  <option value="Updated Information">UPI</option>
              </select></td>
              <td><input name="textfield2" type="text" class="formfield_150px" id="textfield17" tabindex="418" /></td>
              <td>&nbsp;</td>
            </tr>
      </table>
            
            <table id="details02" cellspacing="1" cellpadding="1" style="width:860px; display:none;">
        
        <tr>
          <td class="ub04_label">Special Program Indicator</td>
              <td class="ub04_label">EOB</td>
              <td class="ub04_label">Delay Reason Code</td>
              <td class="ub04_label">Provider/Supplier</td>
              <td class="ub04_label">Medicare Assignment</td>
            </tr>
        <tr>
          <td><select name="select12" id="select12">
            <option value="null" selected="selected"></option>
            <option>01 Early &amp; Periodic Screening</option>
            <option>02 Handicapped Children&rsquo;s Program</option>
            <option>03 Special Federal Funding</option>
            <option>05 Disability</option>
            <option>07 Induced Abortion - Danger to Life</option>
            <option>08 Induced Abortion - Rape or Incest</option>
            <option>09 Second Opinion or Surgery</option>
            </select></td>
              <td><select name="select12" id="select13">
                  <option value="null" selected="selected"></option>
                  <option>NO</option>
                  <option>YES</option>
              </select></td>
              <td><select name="select12" id="select14">
                  <option value="null" selected="selected"></option>
                  <option>Proof of Eligibility</option>
                  <option>Litigation</option>
                  <option>Authorization Delays</option>
                  <option>Certifying Provider</option>
                  <option>Supplying Billing Forms</option>
                  <option>Delivery</option>
                  <option>Third Party Processing</option>
                  <option>Eligibility Determination</option>
                  <option>Original Claim Rejected</option>
                  <option>Administration Delay</option>
                  <option>Other</option>
              </select></td>
              <td><select name="select12" id="select15">
                  <option value="null" selected="selected"></option>
                  <option>NO</option>
                  <option>YES</option>
              </select></td>
              <td><select name="select12" id="select16">
                  <option value="null" selected="selected"></option>
                  <option>Assigned</option>
                  <option>Not Assigned</option>
              </select></td>
            </tr>
        <tr>
          <td class="ub04_label">Document Control ID</td>
              <td class="ub04_label">Peer Review Auth #</td>
              <td class="ub04_label">Adjusted Repriced Claim Ref #</td>
              <td class="ub04_label">Investigational Device Exemption #</td>
              <td class="ub04_label">Clearinghouse Trace #</td>
            </tr>
        <tr>
          <td><input type="text" name="textfield2" id="textfield2" tabindex="410" /></td>
              <td><input type="text" name="textfield2" id="textfield3" tabindex="411" /></td>
              <td><input type="text" name="textfield2" id="textfield4" tabindex="412" /></td>
              <td><input type="text" name="textfield2" id="textfield5" tabindex="413" /></td>
              <td><input type="text" name="textfield2" id="textfield6" tabindex="414" /></td>
            </tr>
        <tr>
          <td class="ub04_label">Demonstration Project ID</td>
              <td class="ub04_label">Fixed Format Info</td>
              <td class="ub04_label">Note Reference Code</td>
              <td class="ub04_label">Claim Note Text</td>
              <td class="ub04_label">&nbsp;</td>
            </tr>
        <tr>
          <td><input type="text" name="textfield2" id="textfield7" tabindex="415" /></td>
              <td><input type="text" name="textfield2" id="textfield16" tabindex="416" /></td>
              <td><select name="select12" id="select17" tabindex="417">
                  <option value="null" selected="selected"></option>
                  <option>ALG</option>
                  <option>DCP</option>
                  <option>DGN</option>
                  <option>DME</option>
                  <option>MED</option>
                  <option>NTR</option>
                  <option>ODT</option>
                  <option>RHB</option>
                  <option>RLH</option>
                  <option>RNH</option>
                  <option>SET</option>
                  <option>SFM</option>
                  <option>SPT</option>
                  <option>UPI</option>
              </select></td>
              <td><input name="textfield2" type="text" class="formfield_150px" id="textfield17" tabindex="418" /></td>
              <td>&nbsp;</td>
            </tr>
      </table>
      <table id="details03" cellspacing="1" cellpadding="1" style="width:860px; display:none;">
        <tr>
          <td class="ub04_label">Special Program Indicator</td>
              <td class="ub04_label">EOB</td>
              <td class="ub04_label">Delay Reason Code</td>
              <td class="ub04_label">Provider/Supplier</td>
              <td class="ub04_label">Medicare Assignment</td>
            </tr>
        <tr>
          <td><select name="select12" id="select12">
            <option value="null" selected="selected"></option>
            <option>01 Early &amp; Periodic Screening</option>
            <option>02 Handicapped Children&rsquo;s Program</option>
            <option>03 Special Federal Funding</option>
            <option>05 Disability</option>
            <option>07 Induced Abortion - Danger to Life</option>
            <option>08 Induced Abortion - Rape or Incest</option>
            <option>09 Second Opinion or Surgery</option>
            </select></td>
              <td><select name="select12" id="select13">
                  <option value="null" selected="selected"></option>
                  <option>NO</option>
                  <option>YES</option>
              </select></td>
              <td><select name="select12" id="select14">
                  <option value="null" selected="selected"></option>
                  <option>Proof of Eligibility</option>
                  <option>Litigation</option>
                  <option>Authorization Delays</option>
                  <option>Certifying Provider</option>
                  <option>Supplying Billing Forms</option>
                  <option>Delivery</option>
                  <option>Third Party Processing</option>
                  <option>Eligibility Determination</option>
                  <option>Original Claim Rejected</option>
                  <option>Administration Delay</option>
                  <option>Other</option>
              </select></td>
              <td><select name="select12" id="select15">
                  <option value="null" selected="selected"></option>
                  <option>NO</option>
                  <option>YES</option>
              </select></td>
              <td><select name="select12" id="select16">
                  <option value="null" selected="selected"></option>
                  <option>Assigned</option>
                  <option>Not Assigned</option>
              </select></td>
            </tr>
        <tr>
          <td class="ub04_label">Document Control ID</td>
              <td class="ub04_label">Peer Review Auth #</td>
              <td class="ub04_label">Adjusted Repriced Claim Ref #</td>
              <td class="ub04_label">Investigational Device Exemption #</td>
              <td class="ub04_label">Clearinghouse Trace #</td>
            </tr>
        <tr>
          <td><input type="text" name="textfield2" id="textfield2" tabindex="410" /></td>
              <td><input type="text" name="textfield2" id="textfield3" tabindex="411" /></td>
              <td><input type="text" name="textfield2" id="textfield4" tabindex="412" /></td>
              <td><input type="text" name="textfield2" id="textfield5" tabindex="413" /></td>
              <td><input type="text" name="textfield2" id="textfield6" tabindex="414" /></td>
            </tr>
        <tr>
          <td class="ub04_label">Demonstration Project ID</td>
              <td class="ub04_label">Fixed Format Info</td>
              <td class="ub04_label">Note Reference Code</td>
              <td class="ub04_label">Claim Note Text</td>
              <td class="ub04_label">&nbsp;</td>
            </tr>
        <tr>
          <td><input type="text" name="textfield2" id="textfield7" tabindex="415" /></td>
              <td><input type="text" name="textfield2" id="textfield16" tabindex="416" /></td>
              <td><select name="select12" id="select17" tabindex="417">
                  <option value="null" selected="selected"></option>
                  <option>ALG</option>
                  <option>DCP</option>
                  <option>DGN</option>
                  <option>DME</option>
                  <option>MED</option>
                  <option>NTR</option>
                  <option>ODT</option>
                  <option>RHB</option>
                  <option>RLH</option>
                  <option>RNH</option>
                  <option>SET</option>
                  <option>SFM</option>
                  <option>SPT</option>
                  <option>UPI</option>
              </select></td>
              <td><input name="textfield2" type="text" class="formfield_150px" id="textfield17" tabindex="418" /></td>
              <td>&nbsp;</td>
            </tr>
      </table>
      <table id="details03" cellspacing="1" cellpadding="1" style="width:860px; display:none;">
        <tr>
          <td class="ub04_label">Special Program Indicator</td>
              <td class="ub04_label">EOB</td>
              <td class="ub04_label">Delay Reason Code</td>
              <td class="ub04_label">Provider/Supplier</td>
              <td class="ub04_label">Medicare Assignment</td>
            </tr>
        <tr>
          <td><select name="select12" id="select12">
            <option value="null" selected="selected"></option>
            <option>01 Early &amp; Periodic Screening</option>
            <option>02 Handicapped Children&rsquo;s Program</option>
            <option>03 Special Federal Funding</option>
            <option>05 Disability</option>
            <option>07 Induced Abortion - Danger to Life</option>
            <option>08 Induced Abortion - Rape or Incest</option>
            <option>09 Second Opinion or Surgery</option>
            </select></td>
              <td><select name="select12" id="select13">
                  <option value="null" selected="selected"></option>
                  <option>NO</option>
                  <option>YES</option>
              </select></td>
              <td><select name="select12" id="select14">
                  <option value="null" selected="selected"></option>
                  <option>Proof of Eligibility</option>
                  <option>Litigation</option>
                  <option>Authorization Delays</option>
                  <option>Certifying Provider</option>
                  <option>Supplying Billing Forms</option>
                  <option>Delivery</option>
                  <option>Third Party Processing</option>
                  <option>Eligibility Determination</option>
                  <option>Original Claim Rejected</option>
                  <option>Administration Delay</option>
                  <option>Other</option>
              </select></td>
              <td><select name="select12" id="select15">
                  <option value="null" selected="selected"></option>
                  <option>NO</option>
                  <option>YES</option>
              </select></td>
              <td><select name="select12" id="select16">
                  <option value="null" selected="selected"></option>
                  <option>Assigned</option>
                  <option>Not Assigned</option>
              </select></td>
            </tr>
        <tr>
          <td class="ub04_label">Document Control ID</td>
              <td class="ub04_label">Peer Review Auth #</td>
              <td class="ub04_label">Adjusted Repriced Claim Ref #</td>
              <td class="ub04_label">Investigational Device Exemption #</td>
              <td class="ub04_label">Clearinghouse Trace #</td>
            </tr>
        <tr>
          <td><input type="text" name="textfield2" id="textfield2" tabindex="410" /></td>
              <td><input type="text" name="textfield2" id="textfield3" tabindex="411" /></td>
              <td><input type="text" name="textfield2" id="textfield4" tabindex="412" /></td>
              <td><input type="text" name="textfield2" id="textfield5" tabindex="413" /></td>
              <td><input type="text" name="textfield2" id="textfield6" tabindex="414" /></td>
            </tr>
        <tr>
          <td class="ub04_label">Demonstration Project ID</td>
              <td class="ub04_label">Fixed Format Info</td>
              <td class="ub04_label">Note Reference Code</td>
              <td class="ub04_label">Claim Note Text</td>
              <td class="ub04_label">&nbsp;</td>
            </tr>
        <tr>
          <td><input type="text" name="textfield2" id="textfield7" tabindex="415" /></td>
              <td><input type="text" name="textfield2" id="textfield16" tabindex="416" /></td>
              <td><select name="select12" id="select17" tabindex="417">
                  <option value="null" selected="selected"></option>
                  <option>ALG</option>
                  <option>DCP</option>
                  <option>DGN</option>
                  <option>DME</option>
                  <option>MED</option>
                  <option>NTR</option>
                  <option>ODT</option>
                  <option>RHB</option>
                  <option>RLH</option>
                  <option>RNH</option>
                  <option>SET</option>
                  <option>SFM</option>
                  <option>SPT</option>
                  <option>UPI</option>
              </select></td>
              <td><input name="textfield2" type="text" class="formfield_150px" id="textfield17" tabindex="418" /></td>
              <td>&nbsp;</td>
            </tr>
      </table>
    </div>
    <div style="float:left; width:108px;">
            <table cellspacing="1" cellpadding="1" style="float:left; width:108px;">
        <tr>
          <td colspan="2" class="ub04_label">Payer</td>
        </tr>
        <tr>
          <td><input name="radio" type="radio" id="details_primary" tabindex="650" onclick="hide('details02');hide('details03');show('details01')" value="Primary" checked="checked" /></td>
        <td>Primary</td>
      </tr>
        <tr>
          <td><input name="radio" type="radio" id="details_secondary" value="Secondary" tabindex="651"  onclick="hide('details01');hide('details03');show('details02')"/></td>
        <td>Secondary</td>
      </tr>
        <tr>
          <td><input name="radio" type="radio" id="details_teritary" value="Tertiary" tabindex="652" onclick="hide('details01');hide('details02');show('details03')" /></td>
        <td>Tertiary</td>
      </tr>
      </table>
    </div>
    </div>
</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.