通过Jquery获取循环出来后<option>中的多个值

html代码部分：

<select class="form-control select" name="user_id" data-live-search="true" id="aaa">

      <volist name="user" id="vo">
            <option value="{$vo.id}" data-id="{$vo.user_department_name}" data-dep="{$vo.user_position_name}" >
                     <span>{$vo.user_name}</span>
                     <span>{$vo.user_department_name}</span>
                      <span>{$vo.user_position_name}</span>
            </option>
       </volist>

</select>

<input class="form-control" id="did" value="" name="depart_name" type="text">

<input class="form-control" id="pid" value="" name="position_name" type="text">

JS代码部分：

<script type="text/javascript">
    $('#aaa').change(function(){
        var d_name = $('#aaa option:selected').attr('data-id');
        document.getElementById('did').value = d_name;
        var p_name = $('#aaa option:selected').attr('data-dep');
        document.getElementById('pid').value = p_name;
    });
</script>