Question

简化的HTML（很长的列表）：

    <select id="tz" name="tz">
      <option timeZoneId="30" useDaylightTime="1" value="0">(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London</option>
      <option timeZoneId="1" useDaylightTime="0" value="-12">(GMT-12:00) International Date Line West</option>
      <option timeZoneId="2" useDaylightTime="0" value="-11">(GMT-11:00) Midway Island, Samoa</option>
    </select>

对于每个时区，我都有一个值范围。我想将每个值保存到一个隐藏的表单项中，因为我想保存时区，无论它们是否使用日光时间以及可能的国家/城市指示器和时间偏移-四件事。

隐藏的表单条目（目前可见）

    <input type="text" name="timeZone" id="timeZone" placeholder="Time Zone">
    <input type="text" name="offset" id="offset" placeholder="Time offset">

我可以使用以下代码获得一个-值（voffset）：

    <script>
      document.getElementById("tz").addEventListener('input',MessageUpdate);

      function MessageUpdate() {
        vtimeZone = tz.options[tz.selectedIndex].timeZoneId;
        voffset = tz.options[tz.selectedIndex].value;

        // go plant recEmail and proEmail into hidden fields 
        var mymodal = $('#updateModalt');
        mymodal.find('.modal-body input#timeZone').val(vtimeZone);
        mymodal.find('.modal-body input#offset').val(voffset);
      }
    </script>

我尝试了各种变体，以使timeZoneId无效。两个值（'timeZoneId'）attr（'timeZoneId'）。

总的来说，这可行：

    voffset = tz.options[tz.selectedIndex].value;

我觉得自己很亲密，因为这没有价值，也没有错误：

    vtimeZone = tz.options[tz.selectedIndex].timeZoneId;

Answer 1

您在这里有点猜测。

首先，没有错误，因为您要做的就是调用未定义的属性。在JavaScript中，不会产生错误。

第二，val('timeZoneId')（假设您的意思是，不是value()，它不是本机或jQuery方法）将设置一个value属性，而不是检索任何内容（属性，值或其他形式。Docs。）

首先，更改HTML以使用数据属性。

<option
    data-timeZoneId="30"
    data-useDaylightTime="1"
    value="0"
>
    (GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London
</option>

然后在您的JS中通过getAttribute()引用它们：

document.querySelector('#tz').addEventListener('input', evt => {
    let
    opt = evt.target.options[evt.target.selectedIndex],
    vtimeZone = opt.getAttribute('data-timeZoneID'), // <--
    voffset = opt.value;
    ;
    //etc...
});

选择选项多值提取

1 个答案: