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

Question

我有一个带有元素（下拉列表）的弹出窗口来设置输入字段内容的样式。我当前的代码在第一步中运行良好。我可以选择弹出窗口中的选项并使用 jQuery 设置输入字段的样式。但是当我再次打开我的弹出窗口时，所有下拉字段都被选中了默认值。 default/selected 值应该是最后选择的值。

如何 set/change 弹出窗口中单个选项的默认值？我尝试使用 prop() 但它不起作用。

示例：首先，我打开输入字段 1 的弹出窗口，选择不同的字体大小和不同的颜色，然后将其关闭（“übernehmen”按钮）。现在我也想更改字体系列并再次打开输入字段 1 的弹出窗口。我必须重新设置所有值（字体系列、字体大小）。

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/

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

谢谢，托马斯

Answer 1

我稍微修改了你的代码来实现它。大多数情况下，我使用 $.data 来存储用户所做的当前选择。

JS Fiddle link https://jsfiddle.net/fygzxbje/2/

// BOOTSTRAP POPOVER
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({      // Bootstrap Popover aktivieren
        html: true,                             // html zulassen
        content: function(){                    // Inhalt des Popovers zuweisen
            var H = $('#div_scoreselector');    // Variable H mit Inhalt des DIVs mit der ID div_scoreselector befüllen
            return $(H).html();                 // Variable H als html ausgeben
        }
    });
});

var schriftart,schriftgroesse,schriftformatierung,schriftfarbe,textausrichtung;

$('.btnTextStil').on('click', function (e) {                    // .btnTextStil ist der Button mit dem das Popover aufegerufen wird
    $(this).prev('.text-container').attr('id', 'mainattr');     // Dem vorangestellten Element mit der Klasse .text-container (Eingabefeld) eine ID hinzufügen
    var ma = $(this).parents('.main-attributes');               // Den Aufruf des Elternelements mit der Klasse .main-attributes in der Variablen ma speichern
    //$('.main-attributes').not(ma).popover('toggle');
    //$(ma).popover('toggle');

      schriftart = $(ma).data('font-family' );
      schriftgroesse =   $(ma).data('font-size');
      schriftformatierung =   $(ma).data('font-weight');
      schriftfarbe =   $(ma).data('color' );
      textausrichtung =  $(ma).data('text-align');

    $('.popover').not(this).hide(); //Versteckt alle anderen Popovers
    e.stopPropagation();
});

// Auswahl der Dropwdownliste an Button übergeben


$('.main-attributes').on('shown.bs.popover', function () {

    schriftart != null && $('.popover #popoverSchriftart').val(schriftart) ;
    schriftgroesse != null && $('.popover #popoverSchriftgroesse').val(schriftgroesse);
    schriftformatierung != null && $('.popover #popoverSchriftformatierung').val(schriftformatierung);
    schriftfarbe != null && $('.popover #popoverSchriftfarbe').val(schriftfarbe);
    textausrichtung != null && $('.popover #popoverTextausrichtung').val(textausrichtung);


    $('.ownSave').click( function() {                                                          // Bei Klick auf den Button "Übernehmen" (hat die Klasse .ownSave)
        var schriftart = $('.popover #popoverSchriftart option:selected').val();            // Den Wert der Dropdownauswahl (Schriftart) in der Variablen schriftart speichern
        var schriftgroesse = $('.popover #popoverSchriftgroesse option:selected').val();
        var schriftformatierung = $('.popover #popoverSchriftformatierung option:selected').val();
        var schriftfarbe = $('.popover #popoverSchriftfarbe').val();
        var textausrichtung = $('.popover #popoverTextausrichtung').val();
         //alert(textausrichtung);                                                             
        $('#mainattr').css({                                                                // Dem Element (Eingabefeld) mit der oben hinzugefügten ID die CSS-Eigenschaft "Schriftart" hinzufügen und mit dem Wert aus der Dropdownauswahl versehen
            'font-family': schriftart,
            'font-size': schriftgroesse,
            'font-weight': schriftformatierung,
            'color': schriftfarbe,
            'text-align': textausrichtung
        });

        var parentmainattributes = $('#mainattr').closest(".main-attributes");
        $(parentmainattributes).data('font-family', schriftart);
        $(parentmainattributes).data('font-size', schriftgroesse);
        $(parentmainattributes).data('font-weight', schriftformatierung);
        $(parentmainattributes).data('color', schriftfarbe);
        $(parentmainattributes).data('text-align', textausrichtung);

        //$('.popover #popoverSchriftart option:selected').attr('selected', 'true');


        $('.text-container').removeAttr('id');                                              // Die oben hinzugefügte ID vom Element mit der Klasse .text-container (Eingabefeld) entfernen
        $('[data-toggle="popover"]').popover('hide');                                       // Das Popover schließen (in diesem Fall alle Popovers schließen
    });
    $('.ownClose').click(function(){
       $('.popover').hide();
    });



});

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

store selected option value within popover (or change default)

jquery

dropdownbox

popover