How do I add an ID to a select > option:selected HTML element?

Here is my code so far.

<!-- select time zone -->
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3 id="stepOne"><b>Step 1:</b> Select your Time Zone</h3>
            <select class="form-control" name="timeZone" id="getTimeZone" onchange="getTimeZone()">
                <?php foreach ($time_zones as $key => $array) : ?>
                    <?php foreach ($array as $offset => $zone) : ?>
                        <option value="<?php echo $offset; ?>"><?php echo $zone; ?></option>
                    <?php endforeach; ?>
                <?php endforeach; ?>
            </select>
        </div>
    </div>
    <!-- end select timezone -->

    <!-- get timezone from dropdown -->
    <script>
        function getTimeZone() {
            // if option is selected add an ID attribute
            // then get that id attributes inner html
            var id = $("#getTimeZone").children("option:selected").attr("timeZoneSelected");
            var timeZone = document.getElementById("getTimeZone").value;
            document.getElementById("showTimeZone").innerHTML = timeZone;
            document.getElementById("timeZoneField").value = timeZone;
            document.getElementById("stepOne").className = "text-success";
        }
    </script>
    <!-- end get timezone from dropdown -->

So basically I am looping through a list of time zones. When the user selects a time zone I want to add an ID to the option, e.g id="timeZoneSelected".

Then I want to grab the innerHTML of that specific option element.

As you can see my code is not working, specifically:

var id = $("#getTimeZone").children("option:selected").attr("timeZoneSelected");

Where am I going wrong?

How do I add an ID to a select > option:selected HTML element?

Here is my code so far.

<!-- select time zone -->
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3 id="stepOne"><b>Step 1:</b> Select your Time Zone</h3>
            <select class="form-control" name="timeZone" id="getTimeZone" onchange="getTimeZone()">
                <?php foreach ($time_zones as $key => $array) : ?>
                    <?php foreach ($array as $offset => $zone) : ?>
                        <option value="<?php echo $offset; ?>"><?php echo $zone; ?></option>
                    <?php endforeach; ?>
                <?php endforeach; ?>
            </select>
        </div>
    </div>
    <!-- end select timezone -->

    <!-- get timezone from dropdown -->
    <script>
        function getTimeZone() {
            // if option is selected add an ID attribute
            // then get that id attributes inner html
            var id = $("#getTimeZone").children("option:selected").attr("timeZoneSelected");
            var timeZone = document.getElementById("getTimeZone").value;
            document.getElementById("showTimeZone").innerHTML = timeZone;
            document.getElementById("timeZoneField").value = timeZone;
            document.getElementById("stepOne").className = "text-success";
        }
    </script>
    <!-- end get timezone from dropdown -->

So basically I am looping through a list of time zones. When the user selects a time zone I want to add an ID to the option, e.g id="timeZoneSelected".

Then I want to grab the innerHTML of that specific option element.

As you can see my code is not working, specifically:

var id = $("#getTimeZone").children("option:selected").attr("timeZoneSelected");

Where am I going wrong?

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 4, 2016 at 11:19 Jethro Hazelhurst asked Oct 4, 2016 at 10:58 Jethro HazelhurstJethro Hazelhurst 3,29577 gold badges4242 silver badges8585 bronze badges 5

• 2 Don't use an id for this - they are intended to be static. Use a class instead. Also, it seems like you just want the text() of the selected option, as none of them have a timeZoneSelected attribute – Rory McCrossan Commented Oct 4, 2016 at 10:59
• Okay, advice heeded, but I only want one element in my entire html page to have the "timeZoneSelected" attribute... so I thought that was what IDs were for. – Jethro Hazelhurst Commented Oct 4, 2016 at 11:02
• 1 To what end? It's a very odd requirement to put a dynamic identifier on an option element which can be quite simply retrieved using option:selected – Rory McCrossan Commented Oct 4, 2016 at 11:06
• Okay, I am trying to display the users selected time zone to the user after they have selected it. The value of all of the options are the time zone offset in seconds... so my only way of 'getting' the user friendly time zone string is by getting the <select> tags inner html... however when I do that I get the HTML of every single one of my timezones, not pretty. So if I add an ID to the exact timezone that the user selected then I can get the innerHTML of that id which will be the userfriendly timezone string. Time zones are a royal... – Jethro Hazelhurst Commented Oct 4, 2016 at 11:09
• Ok - I added an answer for you – Rory McCrossan Commented Oct 4, 2016 at 11:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

To do what you require you can simply retrieve the value and inner text of the selected option within the change event handler. There's no need to dynamically update identifiers or class attributes. Try this:

$('#getTimeZone').change(function() {
  var name = $(this).find('option:selected').text();
  var offset = this.value;
  
  $('#name').html(name);
  $('#offset').html(offset);
  $('#stepOne').addClass('text-success');
});

.text-success { color: #0c0; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <h3 id="stepOne"><b>Step 1:</b> Select your Time Zone</h3>
    <select class="form-control" name="timeZone" id="getTimeZone">
      <option value="-6">CST</option>
      <option value="0">GMT</option>
      <option value="+8">SGT</option>
    </select>
  </div>
</div>

<div id="name"></div>
<div id="offset"></div>

Note that I amended your code to use unobtrusive event handlers as on* event attributes are considered outdated.