show data-id to <select> boostrap modal

Question

i have problem to show data-id to with bootstrap. it won't show the value dynamically when i click the button, and needs to refresh page between 2-3 times to change the value (refresh).

here is my code

<a class="btn btn-warning btn-xs" href="#modal-form-edit" rel="button" data-toggle="modal" data-id="1" > Edit</a>
<a class="btn btn-warning btn-xs" href="#modal-form-edit" rel="button" data-toggle="modal" data-id="1" > Edit</a>

modal

<div id="modal-form-edit" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            .....
        </div>  
        <div class="modal-body">
            <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Book list <span class="required">*</span></label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <select class="select2_single form-control" tabindex="-1" data-width="100%" name="book" id="book" required="required">
                            <option id="book" value="" selected="selected"></option>
                            <option id="book" value="1" >book 1</option>
                            <option id="book" value="2" >book 2</option>
                        </select>
                    </div>
            </div>
        </div>
    </div>
 </div>

js

<script>
 $('#modal-form-edit').on('show.bs.modal', function(e) {
  var books-id = $(e.relatedTarget).data('id');
  $("#book").val(books-id);
 });
</script>

any wrong code at there?

thanks before for any help (sorry for my English)

Answer 1

Try like this once,

$('.atag').on('click', function(e) {
     var books = $(this).attr('data-id');
     $("#book").val(books);
 });

I have given saperate class, and variable declaration is wrong , - is considered as minus use _ instead.

DEMO

Answer 2

Try:

$('#modal-form-edit').on('show.bs.modal', function(e) {
  var books_id = $(this).data('id');
  $('.select2_single option[value="'+books_id+'"]').attr('selected','selected');
 });