顯示數據到 <select> Boostrap模態

Question

我有問題用引導程序顯示數據ID。 當我單擊按鈕時，它不會動態顯示值，並且需要在2-3次之間刷新頁面以更改值（刷新）。

這是我的代碼

<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>

語氣

<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>

那里有任何錯誤的代碼？

在此先感謝您的幫助（對不起，我的英語）

Answer 1

這樣嘗試一次

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

我給了saperate類，並且變量聲明錯誤， -被認為是minus _代替。

DEMO

Answer 2

嘗試：

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