Question

如何在select＆gt;中添加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

要执行您需要的操作，您只需在value事件处理程序中检索所选选项的change和内部文本即可。无需动态更新标识符或类属性。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，我修改了您的代码以使用不显眼的事件处理程序，因为on*事件属性被认为是过时的。

如何将ID添加到选择＆gt;选中的选项元素

1 个答案: