www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to dynamically add a hyper link adjacent to select (combo box) control

  1. #1
    Join Date
    May 2012
    Posts
    1

    How to dynamically add a hyper link adjacent to select (combo box) control

    How to dynamically add a hyper link adjacent to select (combo box) control based on the value selected in select control.
    Ex.

    Select control has two value, Yes, No. If Yes is selected, hyperlink should appear adjacent to select control. If No is selected, then the hyperlink should disappear.

    Following is my control
    <span id="el_IsHavingSchd">
    <select onchange="OnSchdSelect(x_IsHavingSchd)" name="x_IsHavingSchd" id="x_IsHavingSchd">
    <option value="">
    Please Select</option>
    <option value="1">
    Yes</option>
    <option selected="selected" value="0">
    No</option>
    </select>
    </span>

    And in OnSchdSelect() function, based on the selection I want to add &nbsp;<a href="www.intel.com"> Intel </a> if Yes is selected

    Which will become like the following (assuming I am able to add it dynamically)

    <span id="el_IsHavingSchd">
    <select onchange="OnSchdSelect(x_IsHavingSchd)" name="x_IsHavingSchd" id="x_IsHavingSchd">
    <option value="">
    Please Select</option>
    <option value="1">
    Yes</option>
    <option selected="selected" value="0">
    No</option>
    </select>
    &nbsp;<a href="www.intel.com"> Intel </a></span>


    How to do this?

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Opera, FF, Safari, Chrome, IE

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>...</title>
    <head>
    <script type="text/javascript">
    function onsel(obj){
    var val=obj[obj.selectedIndex].value;
    if(val==''){obj.blur();return;}
    var lnk=document.createElement('span');
    lnk.setAttribute('id','intelcom');
    lnk.innerHTML='&nbsp;<a href="www.intel.com"> Intel </a>';
    if(val==1){obj.parentNode.appendChild(lnk);}
    if(val==0){
    var intelcom=document.getElementById('intelcom');
    intelcom.parentNode.removeChild(intelcom);
    }
    obj.blur();
    }
    </script>
    </head>
    <body>
    <center>
    <select onchange="onsel(this)" name="x_IsHavingSchd" id="x_IsHavingSchd">
    <option selected="selected" value="">Please Select</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
    </select>
    </center>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Nov 2010
    Posts
    1,082


    why not just this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    </head>
    <body>
    <select onchange="OnSchdSelect(this.value)" name="x_IsHavingSchd" id="x_IsHavingSchd">
    <option>Please Select</option>
    <option value="1">Yes</option>
    <option selected="selected" value="0">No</option>
    </select>
    
    <a id="thelink" style="display:none" href="www.intel.com"> Intel </a>
    <script>
    function OnSchdSelect(val){
    document.getElementById("thelink").style.display=val==1?"block":"none"
    }
    
    </script>
    </body>
    </html>

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    i thought there may be more than 2 options and links are genereted with some conditions, if no, of course, xelawho is right ))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles