aktualisieren javascript mit html Wert auswählen

Question

Hier ist mein Code:

<select name="points"> 
    <option value="5">5 points</option> 
    <option value="10">10 points</option> 
    <option value="50">50 points</option> 
</select> 

hier ist mein Javascript-Code:

<script 
    src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
    data-key="test key" 
    data-amount="option value here" // i need help here 
    data-name="Site Name" 
    data-description="2 widgets ($20.00)" 
    data-image="/128x128.png"> 
</script> 

Der Javascript-Code ist eine Schaltfläche für ein Pop-up. Ich möchte den Wert der Auswahloption abrufen und diesen in die Datenmenge im JS-Code einfügen. wie kann ich das machen?

Answer 1

Verwenden Sie die Änderungsmethode, um den Wert der Auswahlliste zu ermitteln, und wenden Sie sie anschließend auf das Datenmengenattribut der Schaltfläche an.

$(document).ready(function(){ 
    $('[name=points]').change(function(){ 
     var newAmount=$(this).val(); 
     $('.stripe-button').data('amount',newAmount); 
    }) 
}); 

Answer 2

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script> 
    function updata(){ 
var point_val = $("#points option:selected").val(); 
alert(point_val); 
document.querySelector("script").setAttribute("data-amount",point_val); 
} 

</script> 
<select name="points" id="points" onchange="updata();"> 
    <option value="5">5 points</option> 
    <option value="10">10 points</option> 
    <option value="50">50 points</option> 
</select> 
<script 
    src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
    data-key="test key" 
    data-amount="option value here" 
    data-name="Site Name" 
    data-description="2 widgets ($20.00)" 
    data-image="/128x128.png"> 
</script> 

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script> 
 
\t function updata(){ 
 
var point_val = $("#points option:selected").val(); 
 
alert(point_val); 
 
document.querySelector("script").setAttribute("data-amount",point_val); 
 
} 
 
\t 
 
</script> 
 
<select name="points" id="points" onchange="updata();"> 
 
    <option value="5">5 points</option> 
 
    <option value="10">10 points</option> 
 
    <option value="50">50 points</option> 
 
</select> 
 
<script 
 
    src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
 
    data-key="test key" 
 
    data-amount="option value here" 
 
    data-name="Site Name" 
 
    data-description="2 widgets ($20.00)" 
 
    data-image="/128x128.png"> 
 
</script>