SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display selected option's text from drop down menu and change when selection changes

    I tried to do a search but the search system didn't seem to respond - perhaps the search string was too long, but this was quite a particular problem.

    ----------

    I have a drop down menu, say like this:

    Code HTML4Strict:
    <select name="dropdown">
    <option value="5">ABC 1111</option>
    <option value="7">BBC 25252</option>
    <option value="1">SDFSDF sSDFSDFS</option>
    </select>

    Suppose, further down the page, I want to display which option was selected in that menu, so if the first option was selected, I want to display 'ABC 1111', the second 'BBC 25252' etc. and if that option changes, this text displayed also changes.

    Furthermore, that dropdown menu is dynamically generated, server-side (PHP, MySQL). Thus, hardcoded JS isn't really what I'm looking for, but rather something that will directly take what is shown - if that's possible?

    Finally, I want to ensure that when the page is initially loaded, some text still shows - when the page is loaded, the first option will already be selected (not because I put 'selected' in, but because there's no blank option).

    Thank you in advance... hopefully there's a simple solution - I'm sure there must be, but alas I know nothing about JS!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Popuating the combobox is easy and done with php.

    As for displaying selected option:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function update(e) {
                    var d = document.getElementById('result');
                        d.innerHTML = '';
                        d.appendChild(document.createTextNode(e.options[e.selectedIndex].text));
                }
            </script>
        </head>
        <body>
            
            <select id="test" onchange="update(this)">
                <option value="5">ABC 1111</option>
                <option value="7">BBC 25252</option>
                <option value="1">SDFSDF sSDFSDFS</option>
            </select>
            <br />
            <div id="result"></div>
        </body>
    </html>


  3. #3
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help Gav.

    One further question: when the page loads, <div id="result"></div> is blank. However, an option is already selected in the drop down menu. How do I make it show what is already selected then?

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function update(e) {
                    var d = document.getElementById('result');
                        d.innerHTML = '';
                        d.appendChild(document.createTextNode(e.options[e.selectedIndex].text));
                }
                window.onload = function() {
                    var d = document.getElementById('test');
                        d.onchange();
                }
            </script>
        </head>
        <body>
            
            <select id="test" onchange="update(this)">
                <option value="5">ABC 1111</option>
                <option value="7">BBC 25252</option>
                <option value="1">SDFSDF sSDFSDFS</option>
            </select>
            <br />
            <div id="result"></div>
        </body>
    </html>


  5. #5
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works perfectly!

    One last thing; how do I parse some HTML in what is output?

    We have:

    d.appendChild(document.createTextNode(e.options[e.selectedIndex].text));
    If I want to change it so that it displays what's in the drop down box inside <strong> tags, what should I do? I tried putting in strong tags in there like so: '<strong>' + ... + '</strong>' but it doesn't parse the HTML.

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function update(e) {
                    var d = document.getElementById('result');
                        d.innerHTML = '';
                        //d.appendChild(document.createTextNode(e.options[e.selectedIndex].text)); // text
                        d.innerHTML = '<strong>' + e.options[e.selectedIndex].text + '</strong>'; // text/html
                }
                window.onload = function() {
                    var d = document.getElementById('test');
                        d.onchange();
                }
            </script>
        </head>
        <body>
            
            <select id="test" onchange="update(this)">
                <option value="5">ABC 1111</option>
                <option value="7">BBC 25252</option>
                <option value="1">SDFSDF sSDFSDFS</option>
            </select>
            <br />
            <div id="result"></div>
        </body>
    </html>



Bookmarks

Posting Permissions

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