選択された選択>オプション要素にIDを追加する方法

Question

選択>オプションにIDを追加する方法：選択したHTML要素？

ここまでは私のコードです。

<!-- 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 --> 

基本的に私はタイムゾーンのリストをループしています。ユーザーがタイムゾーンを選択すると、オプションにIDを追加したいとします（例：id="timeZoneSelected"）。

次に、その特定のオプション要素のinnerHTMLを取得したいと思います。私のコードは、具体的には、

が動作していないあなたが見ることができるように：

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

はどこで間違ったんですか？

Answer 1

必要な処理を行うには、changeイベントハンドラ内のvalueと選択したオプションの内部テキストを取得するだけです。識別子やクラス属性を動的に更新する必要はありません。私はon*イベント属性が古くなったと考えられているとして、控えめなイベントハンドラを使用するようにコードを修正し

$('#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>

注：これを試してみてください。