Drop-down-Preis-Update

Question

Ich versuche eine App zu erstellen, die Menschen die Wahl einer Lizenz ermöglicht und der Preis für verschiedene Lizenzen unterschiedlich ist. Ich möchte eine Echtzeit-Preisaktualisierung auf der Seite des Produkts. Hier ist die Referenz, die ich für den Code unten nahm: https://stackoverflow.com/a/6740218

Code:

<script type="text/javaScript"> 
 
    var price = {"3":"11","2":"500","1":"1000"}; 
 
\t $(function() { 
 
     $('select[name=dropdown_price_change]').change(function() { 
 
      document.getElementById('price_disp').innerHtml = price[$(this).val()]; 
 
     }); 
 

 
     // Trigger on dom ready 
 
     $('select[name=dropdown_price_change]').change(); 
 
    }); 
 
</script>

<div class="product-price" id="price_disp"> 
 
    <form class="cart nobottommargin clearfix" method="get"> 
 
     <div class="quantity clearfix"> 
 
      <select id="dropdown_price_change" name="dropdown_price_change" class="form-control"> 
 
       <option value="3">Personal License</option> 
 
       <option value="2">Small Firm License</option> 
 
       <option value="1">Enterprise or Developer License</option> 
 
      </select>

Vielen Dank im Voraus. ;)

Answer 1

innerHtml sollte innerHTML und offen sein, sollten Sie wahrscheinlich textContent statt innerHTML in diesem Fall ohnehin die Werte der select beliebiges HTML nicht enthalten, da die Verwendung werden.

Außerdem sollten Sie die Funktion 10 nicht auf Dokument bereit auslösen, da der Benutzer nie die Dropdown-Liste auf diese Weise sehen und verwenden kann.

Schließlich fügen Sie der Liste eine "Dummy" -Wahl als Standardoption hinzu, so dass der Benutzer den Wert ändern muss, wenn er "Personal License" aus der Liste auswählen möchte. Ohne dies wird das Änderungsereignis nicht ausgelöst, da dies die Standardauswahl an erster Stelle war.

var price = {"3":"11","2":"500","1":"1000"}; 
 

 
$(function(){ 
 
    $('select[name=dropdown_price_change]').change(function(){ 
 
    document.getElementById('price_disp').textContent = price[$(this).val()]; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="product-price" id="price_disp"> 
 
    <form class="cart nobottommargin clearfix" method="get"> 
 
    <div class="quantity clearfix"> 
 
     <select id="dropdown_price_change" name="dropdown_price_change" class="form-control"> 
 
     <option value="">-- Select an Option --</option> 
 
     <option value="3">Personal License</option> 
 
     <option value="2">Small Firm License</option> 
 
     <option value="1">Enterprise or Developer License</option> 
 
     </select> 
 
    </div> 
 
    </form> 
 
</div>