[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3293
  • Last Modified:

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
0
Pdesignz
Asked:
Pdesignz
  • 2
1 Solution
 
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
 
hieloCommented:
glad to help
0
 
PdesignzAuthor 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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now