Dropdown will not load PDF when chosen

I have a function that chooses a PDF from a list dropdown, but instead of loading and displaying, it only shows a blank modal. Ideas?

<li>
  <a href="">Case Studies</a>
  <ul class="rd-navbar-dropdown">
    <li class="rd-navbar-aside-right">
     <a id="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/1.pdf#toolbar=0">Case Study 1</a><br>
     <a id="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/2.pdf#toolbar=0">Case Study 2</a><br>
     <a id="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/3.pdf#toolbar=0">Case Study 3</a><br>
    </li>
  </ul>
</li>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"  width="960" height="600">
  <div class="modal-dialog" width="700px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <iframe id="iframe" src="" width="100%" height="600px" frameborder="0" allowtransparency="true"></iframe>  
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  $("#ai_dropdown").on('click', function(e) {
    var option = $('a:selected', this).data('href');
    console.log(option);
    $('#iframe').attr('src', option);
  }); 
});

Solution

Dont give ids to anchor tag(a). Create separate listitem(li) for each anchor(a)tag.Give id "ai_dropdown" to unorderedlist(ul) tag.

<ul id="ai_dropdown" class="rd-navbar-dropdown">
    <li  class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg">Case Study 1</a></li>         
     <li class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">Case Study 2</a></li>
     <li class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297__340.jpg">Case Study 3</a>
    </li>
  </ul>

Now to target the element where the click has come from and get href

 $("#ai_dropdown li>a").on('click', function(e) {
    var option = $(this).attr('href');
    $('#iframe').attr('src', option);
  });

Check if above code works by running this snippet

$(document).ready(function() {
  $("#ai_dropdown li>a").on('click', function(e) {
    var option = $(this).attr('href');
    $('#iframe').attr('src', option);
  }); 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <a href="">Case Studies</a>
  <ul id="ai_dropdown" class="rd-navbar-dropdown">
    <li  class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg">Case Study 1</a></li>
     
     <li class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">Case Study 2</a></li>
     <li class="rd-navbar-aside-right">
     <a  data-toggle="modal" data-target="#myModal" href="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297__340.jpg">Case Study 3</a>
    </li>
  </ul>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"  width="960" height="600">
  <div class="modal-dialog" width="700px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <iframe id="iframe" src="" width="100%" height="600px" frameborder="0" allowtransparency="true"></iframe>  
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<li>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>