在弹出框中存储选定的选项值（或更改默认值）

Question

我有一个包含元素（下拉列表）的popover来设置输入字段的内容的样式。 我的当前代码在第一步中正常工作。我可以在popover中选择选项并使用jQuery设置输入字段的样式。 但是当我再次打开我的popover时，所有下拉字段都会被选中并带有默认值。默认/选定的值应该是最后选择的值。

如何在弹出窗口中设置/更改单个选项的默认值？ 我试图使用prop（），但它不起作用。

示例：首先，我打开输入字段1的popover并选择不同的字体大小和不同的颜色并关闭它（“übernehmen”按钮）。现在我想更改font-family并再次打开我的popover输入field1。我必须再次设置所有值（font-family，font-size）。

HTML：

    <div class='hidden' id='div_scoreselector'>
    <div>
        <div class="row">
            <div class="col-md-12">
                <div class="row div-scorerange">
                    <div class="col-md-12">
                        <div class="form-group">
                            <span class="glyphicon glyphicon-font"></span> <label class="control-label">Schriftart</label>
                            <select id='popoverSchriftart' class='arial form-control'>
                                <option value='Arial' class='arial'>Arial</option>
                                <option value='Times New Roman' class='times'>Times New Roman</option>
                                <option value='Comic Sans MS' class='comic'>Comic Sans</option>
                            </select>
                            <br />
                            <span class="glyphicon glyphicon-text-size"></span> <label class="control-label">Schriftgröße</label>
                            <select id="popoverSchriftgroesse" class="arial form-control">
                                <option value="12px">9pt</option>
                                <option value="13px">10pt</option>
                                <option value="15px">11pt</option>
                                <option value="16px">12pt</option>
                                <option value="17px">13pt</option>
                                <option value="19px">14pt</option>
                                <option value="21px">15pt</option>
                                <option value="22px">16pt</option>
                                <option value="23px">17pt</option>
                                <option value="24px">18pt</option>
                                <option value="25px">19pt</option>
                                <option value="26px">20pt</option>
                            </select>
                            <br />
                            <span class="glyphicon glyphicon-bold"></span> <label class="control-label">Schriftformatierung</label>
                            <select id="popoverSchriftformatierung" class="arial form-control">
                                <option value="normal">Normal</option>
                                <option value="bold">Fett</option>
                            </select>
                            <br />
                            <span class="glyphicon glyphicon-text-color"></span> <label class="control-label">Schriftfarbe</label>
                            <br /><input type="color" id="popoverSchriftfarbe" />
                            <br /><br />
                            <span class="glyphicon glyphicon-align-center"></span> <label class="control-label">Textausrichtung</label>
                            <select id="popoverTextausrichtung" class="arial form-control">
                                <option value="left">Links</option>
                                <option value="center" selected="selected">Mittig</option>
                                <option value="right">Rechts</option>
                            </select>
                        </div>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col-md-6 col-md-offset-6">
                        <button class="btn btn-success ownSave">Übernehmen</button>
                        <button class="btn btn-danger ownClose">Abbrechen</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


                <div class="main-attributes">
                    <input type="text" name="Überschrift" value="Musikrichtungen" class="arial text-container" style="color: orange" />
                    <img src="http://img1.wikia.nocookie.net/__cb20140129172620/lieblingsbuecher/de/images/e/e8/Stift_-_Vector-Icon.png" class="btnTextStil" data-toggle="popover" data-placement="bottom" />
                </div>
                <br />
                <div class="main-attributes">
                    <input type="text" name="Register 1" value="Rock" class="arial text-container" />
                    <img src="http://img1.wikia.nocookie.net/__cb20140129172620/lieblingsbuecher/de/images/e/e8/Stift_-_Vector-Icon.png" class="btnTextStil" data-toggle="popover" data-placement="bottom" />
                </div>
        </div>
    </div>

jQuery的：

$(document).ready(function(){
$('[data-toggle="popover"]').popover({     
   html: true,  
   content: function(){                  
      var H = $('#div_scoreselector');  
      return $(H).html();                 
      }
   });
});
$('.btnTextStil').on('click', function (e) {                    
  $(this).prev('.text-container').attr('id', 'mainattr');     
  var ma = $(this).parents('.main-attributes');               
  $('.popover').not(this).hide();
  e.stopPropagation();
});
$('.main-attributes').on('shown.bs.popover', function () {
  $('.ownSave').click( function() {                                                         
var schriftart = $('.popover #popoverSchriftart option:selected').val();            
var schriftgroesse = $('.popover #popoverSchriftgroesse option:selected').val();
var schriftformatierung = $('.popover #popoverSchriftformatierung option:selected').val();
var schriftfarbe = $('.popover #popoverSchriftfarbe').val();
var textausrichtung = $('.popover #popoverTextausrichtung').val();      $('#mainattr').css({                                                        
                'font-family': schriftart,
                'font-size': schriftgroesse,
                'font-weight': schriftformatierung,
                'color': schriftfarbe,
                'text-align': textausrichtung
    });
            $('.popover #popoverSchriftart option:selected').prop('selected', true);
            $('.text-container').removeAttr('id');                                              
            $('[data-toggle="popover"]').popover('hide');                                       
        });
        $('.ownClose').click(function(){
           $('.popover').hide();
        });
    });

https://jsfiddle.net/rince/fygzxbje/

我希望我的描述是可以理解的，有人可以帮助我。

谢谢， 托马斯