Link-Wert von Dropdown zu einem anderen Button übergeben

Question

Ich arbeite derzeit an einem Bestellsystem, das es dem Benutzer ermöglicht, einen bestimmten Anbieter aus einem Dropdown-Menü auszuwählen und ihre Auswahl durch Klicken auf eine separate Schaltfläche zu bestätigen.

Ein perfektes Beispiel wäre die Fallout 4 store page, wo die Schaltfläche "Order" deaktiviert ist, bis ein Element tatsächlich aus dem Dropdown-Menü ausgewählt wurde. (In meinem Fall gibt es nur ein Dropdown-Menü).

Ich habe die folgende HTML bekam:

<div class="col-md-12"> 
<div class="productRow"> 
    <div class="row"> 
    <div class="col-md-1"></div> 

     <div class="col-md-5"> 
      <div class="dropdownPositionLeft"> 
       <div class="dropdown"> 
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
        Choose your platform! 
        <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
        <!-- List of vendors --> 
        <li><a tabindex="-1">Item I</a></li> 
        <li><a tabindex="-1">Item II</a></li> 
        <li><a tabindex="-1">Item III</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 

     <div class="col-md-5"> 
      <div class="dropdownPositionRight"> 
       <!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu --> 
       <a href="<passed variable>" class="btn btn-danger" role="button">Order now!</a> 
      </div> 
     </div> 
    </div> 
</div> 

Und das folgende Javascript, welches die Beschriftung der Dropdown-Schaltfläche ersetzt:

$(".dropdown-menu li a").click(function(){ 
    $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>'); 
    $(this).parents(".dropdown").find('.btn').val($(this).data('value'));} 

ich die „Ordner wollen jetzt "- Schaltfläche, um einen externen Link zu einem Anbieter basierend auf dem Dropdown-Menü zu erhalten. Das heißt, ich müsste eine Variable aus dem Dropdown-Menü an die Schaltfläche übergeben - Bisher ist mir das nicht gelungen.

Ich bin sehr neu sowohl Bootstrap und Javascript und hoffte, dass jemand hier mich in die richtige Richtung zeigen könnte, wie ich damit umgehen sollte.

Ich nehme an, dass ich in der Lage sein sollte, einen href-Wert mit den Elementen im Dropdown-Menü zu speichern und an die Bestell-Schaltfläche weiterzuleiten, wenn ich ausgewählt wurde, aber ich hatte kein Glück dabei und gleichzeitig den Player über das Drop-Down-Menü nicht direkt auf den Anbieter zeigen.

Ich habe auch mit Formen experimentiert ohne den gewünschten Effekt. Offensichtlich mache ich etwas falsch, bin mir aber nicht sicher, was es ist.

Answer 1

Schauen Sie sich die Informationen zur Verwendung von Bootstrap-Tasten hier: http://v4-alpha.getbootstrap.com/components/buttons/

ich in der Regel auf den Button nehmen und es dann wickeln im Tag wie folgt:

<a href="..."><button type="button" class="btn btn-primary" disabled>Primary</button></a> 

Beachten Sie, wie ich die Taste standardmäßig deaktiviert gemacht Dann können Sie Javascript/jquery verwenden, um das deaktivierte Attribut zu entfernen, wenn eine bestimmte Aktion auf der Seite ausgeführt wird.

Soweit es auf der Grundlage einer anderen Box ausgewählt wurde, können Sie auch das Attribut href = "" mit jquery setzen, wenn Sie möchten, dass es aktualisiert wird, ohne die Seite neu zu laden, oder wenn Sie sich keine Sorgen machen Seite, die neu geladen werden muss, könnten Sie innerhalb der href-Anführungszeichen verwenden.