javascript - 我无法将多个值从选择下拉 HTML 传递到 JavaScript，这是怎么回事？

Question

我想创建更改事件函数来显示从选择选项传递的两个值。

下面是我的选择代码。我想将 data-a 和 data-b 的属性值传递给 JavaScript，这样我就可以使用它将每个值传递给每个 span元素。

<select id="ddlEmployee" name="xAcademicYear" class="form-control" id="exampleFormControlSelect1">
    <option data-a="2015-01-01" data-b="2016-12-31" value="2015-2016">2015-2016</option>
    <option data-a="2016-01-01" data-b="2017-12-31" value="2016-2017">2016-2017</option>
    <option data-a="2017-01-01" data-b="2018-12-31" value="2017-2018">2017-2018</option>
</select>

这两个值都将结束...

<span id="curdatestart"></span>
<span id="curdateend"></span>

这是我捕获 data-a 和 data-b 并通过 id 再次抛出它的脚本:

$(document).ready(function(){
    $("#ddlEmployee").change(function(){
        var xDate = document.getElementById('ddlEmployee');
        var startDate = xDate.getAttribute('data-a');
        var endDate = xDate.getAttribute('data-b');
        document.getElementById("curdatestart").innerHTML = startDate;
        document.getElementById("curdateend").innerHTML = endDate;
    });
});

请帮帮我...

Answer 1

尝试以下方法获取所选的选项属性:

请注意:如果您知道在您的情况下没有要插入元素的 HTML，最好使用 textContent 而不是 innerHTML.

$(document).ready(function(){
  $("#ddlEmployee").change(function(){
    var slectedOption = this.options[this.selectedIndex];
    var startDate = slectedOption.getAttribute('data-a');
    var endDate = slectedOption.getAttribute('data-b');
    //document.getElementById("curdatestart").innerHTML = startDate;
    //document.getElementById("curdateend").innerHTML = endDate;
    document.getElementById("curdatestart").textContent = startDate;
    document.getElementById("curdateend").textContent = endDate;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlEmployee" name="xAcademicYear" class="form-control" id="exampleFormControlSelect1">
    <option data-a="2015-01-01" data-b="2016-12-31" value="2015-2016">2015-2016</option>
    <option data-a="2016-01-01" data-b="2017-12-31" value="2016-2017">2016-2017</option>
    <option data-a="2017-01-01" data-b="2018-12-31" value="2017-2018">2017-2018</option>';
</select>

<span id="curdatestart"></span>
<span id="curdateend"></span>