Show value of select option in html

Question

I have a list with thetag, the item values are obtained through an online spreadsheet. When selecting an option, the value does not appear in the html in real time. can anybody help me? I'm trying to solve it, but I can't find the error.

CODEPEN LINK EXAMPLE

 $(document).ready(function() { var sheetURL = "https://spreadsheets.google.com/feeds/list/1J0qyxUCCkvcFGZ6EIy9nDOgEuTlpI5ICVG3ZsBd_H-I/1/public/values?alt=json"; $.getJSON(sheetURL, function(data) { var entryData = data.feed.entry; console.log(data); jQuery.each(entryData, function() { $("#divTax").append( '<option hidden="hidden" selected="selected" value="0">CHOISE</option><option value="' + this.gsx$values.$t + '">' + this.gsx$names.$t + '&nbsp;&nbsp;&nbsp;$' + this.gsx$values.$t + '</option>' ); }); }); }); var totalWithTax = $('#divTax:selected').val(); $('.total').html(totalWithTax);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <select style="width: 80%;" id="divTax"></select> <br> Total:<div class="total"></div>

Answer 1

You to put the code that displays the selection in an event listener.

 $(document).ready(function() { var sheetURL = "https://spreadsheets.google.com/feeds/list/1J0qyxUCCkvcFGZ6EIy9nDOgEuTlpI5ICVG3ZsBd_H-I/1/public/values?alt=json"; $.getJSON(sheetURL, function(data) { var entryData = data.feed.entry; jQuery.each(entryData, function() { $("#divTax").append( '<option hidden="hidden" selected="selected" value="0">CHOISE</option><option value="' + this.gsx$values.$t + '">' + this.gsx$names.$t + '&nbsp;&nbsp;&nbsp;$' + this.gsx$values.$t + '</option>' ); }); }); $("#divTax").change(function() { var totalWithTax = $(this).val(); $('.total').text(totalWithTax); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <select style="width: 80%;" id="divTax"></select> <br> Total: <div class="total"></div>