parsing html dropdownlist display text and formatting display text

Hi experts,

I have a regular html,css, javascript page.

This is the code for my page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script type="text/javascript">

        // start of document ready
        $(document).ready(function () {
            // ---------------------


            // ---------------------
            // end of document ready
        });        

        function myFunction() {

            // get the selected value of the dropdownlist called DropDownList1 and set it to a variable called x
            var x = document.getElementById("DropDownList1").value;

            // get the selected text of the dropdownlist called DropDownList1 and set it to a variable called y
            var ddltext = document.getElementById("DropDownList1");
            var y = ddltext.options[ddltext.selectedIndex].text;

            // display the value stored in variable x
            document.getElementById("demo").innerHTML = "Item selected value: " + x;

            // display the value stored in variable y
            document.getElementById("demo2").innerHTML = "Item selected text: " + y;
        }

    </script>
</head>
<body>

<p>Select an employee</p>

<select id="DropDownList1" onchange="myFunction()">
  <option value="1">Davolio - 1948-12-08 03:15:00</option>
  <option value="2">Fuller - 1952-02-19 08:23:00</option>
  <option value="3">Leverling - 1963-08-30 06:15:00</option>
</select>

<p id="demo"></p>
<p id="demo2"></p>
</body>
</html>

Open in new window


When I run my page it looks like this:

current page
I have a html dropdownlist using 3 static values.  
My actual example uses sql server as the database to populate the dropdownlist but I created this example just for the purpose of this question.

If you notice, when I select an item from the ddl,  the value and the display text are displayed on my page using the onchange event.

If you notice currently the display text of the ddl is in this format. LastName - yyyy-mm-dd mm:hh:ss

I would like the display text of my dropdownlist to display the text in this format: LastName - mm/dd/yyyy mm:hh:ss

So my desired result would look like this:

desired date format on the dropdownlist
Basically i want to format the date part on the client side using javascript or jQuery. Whatever is easier.
I read that one technique to do this is to use javascript to parse the ddl display text and the format the date to U.S. format like my image above.

Anyone know the syntax to do that?

My example above contains concatenated string value.

But if I have this as my dropdownlist

<select id="DropDownList1" onchange="myFunction()">
  <option value="1">1948-12-08 03:15:00</option>
  <option value="2">1952-02-19 08:23:00</option>
  <option value="3">1963-08-30 06:15:00</option>
</select>

How would I parse this ddl text using javascript so that the displaytext displays like this?:

desired ddl display text
LVL 1
maqskywalkerAsked:
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.

maqskywalkerAuthor Commented:
essentially I'm trying to do something like this example

In this example they are using angularjs though    
     http://jsfiddle.net/cherniv/6EkL7/2/

In my example above I want to format the Date in my string to U.S. Date format as shown in the image above.
hieloCommented:
Try:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script type="text/javascript">

        // start of document ready
        $(document).ready(function () {
            // ---------------------


            // ---------------------
            // end of document ready
        });        

        function myFunction() {

            // get the selected value of the dropdownlist called DropDownList1 and set it to a variable called x
            var x = document.getElementById("DropDownList1").value;

            // get the selected text of the dropdownlist called DropDownList1 and set it to a variable called y
            var ddltext = document.getElementById("DropDownList1");

            // "capture" the sub-patterns using a regex -- y[1] has everything before the year. y[2]==year; y[3]=month, etc
            var y = ddltext.options[ddltext.selectedIndex].text.match(/^([^\d]+)(\d{4})-(\d\d)-(\d\d)(.+)/);

            // display the value stored in variable x
            document.getElementById("demo").innerHTML = "Item selected value: " + x;

            // display the value stored in variable y
            document.getElementById("demo2").innerHTML = "Item selected text: " + y[1]+y[3]+'/'+y[4]+'/'+y[2]+y[5];
        }

    </script>
</head>
<body>

<p>Select an employee</p>

<select id="DropDownList1" onchange="myFunction()">
  <option value="1">Davolio - 1948-12-08 03:15:00</option>
  <option value="2">Fuller - 1952-02-19 08:23:00</option>
  <option value="3">Leverling - 1963-08-30 06:15:00</option>
</select>

<p id="demo"></p>
<p id="demo2"></p>
</body>
</html>

Open in new window

maqskywalkerAuthor Commented:
hielo,

when I run your example i get this:

example result
Is it possible to format the ddl display text I circled in red to look just like the one circled in blue?


See  in this html the dropdownlist is populated with this
<select id="DropDownList1" onchange="myFunction()">
  <option value="1">Davolio - 1948-12-08 03:15:00</option>
  <option value="2">Fuller - 1952-02-19 08:23:00</option>
  <option value="3">Leverling - 1963-08-30 06:15:00</option>
</select>

But in my actual example, the ddl is populated with a sql server datetime column that I'm concatenating with the LastName column and a dash.
So i'm binding the DDL to a sql server column containing a string.  
The sql server table has string column(varchar) i'm binding to the ddl that contains values like this:  Davolio - 1948-12-08 03:15:00
hieloCommented:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script type="text/javascript">

        // start of document ready
        $(document).ready(function () {
            // ---------------------

			var options = [];
			$("option","#DropDownList1").each(function(){
				var result = $(this).text().match(/^([^\d]+)(\d{4})-(\d\d)-(\d\d)(.+)/);
				options.push( '<option value="'+$(this).val()+'">'+result[1]+result[3]+'/'+result[4]+'/'+result[2]+result[5]+'</option>' )
			});
			$('#DropDownList1').empty().append( options.join(""));
            // ---------------------
            // end of document ready
        });        

        function myFunction() {

            // get the selected value of the dropdownlist called DropDownList1 and set it to a variable called x
            var x = document.getElementById("DropDownList1").value;

            // get the selected text of the dropdownlist called DropDownList1 and set it to a variable called y
            var ddltext = document.getElementById("DropDownList1");
            var y = ddltext.options[ddltext.selectedIndex].text;

            // display the value stored in variable x
            document.getElementById("demo").innerHTML = "Item selected value: " + x;

            // display the value stored in variable y
            document.getElementById("demo2").innerHTML = "Item selected text: " + y;
        }

    </script>
</head>
<body>

<p>Select an employee</p>

<select id="DropDownList1" onchange="myFunction()">
  <option value="1">Davolio - 1948-12-08 03:15:00</option>
  <option value="2">Fuller - 1952-02-19 08:23:00</option>
  <option value="3">Leverling - 1963-08-30 06:15:00</option>
</select>

<p id="demo"></p>
<p id="demo2"></p>
</body>
</html>

Open in new window

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
maqskywalkerAuthor Commented:
thanks. well done.
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.