CODEWITHSUNDEEP
javascriptjqueryhtml
Jethro Hazelhurst
Jethro Hazelhurst

Reputation: 3285

How to add an ID to a select > option element that is selected

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?

Upvotes: 2

Views: 8960

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337733

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.com/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.

Upvotes: 3

Related Questions