darkraja darkraja - 1 month ago 17
Javascript Question

Change text value HTML with jQuery

I have this html code:

<div class="option">
<h4 class="form-label">Quantité de data</h4>
<select class="selectpicker" name="Quantité de data" id=datanb>
<option value="10">10 gb</option>
<option value="20" selected>20 gb</option>
<option value="30">30 gb</option>
</select>
</div>


And I want to change this code:

<h2 class="price" id="lol"> 29€ - 1semaine - 20gb </h2>


The value 20 to be 10 or 30 depending the value in the
selectpickers
.

I've tried this with jQuery, but is doesn't work.

if ($('#datanb').is("10 GB"))
$('#lol').text('19€ - 1semaine - 10gb');

if ($('#datanb').is("30 GB"))
$('#lol').text('19€ - 1semaine - 20gb');

if ($('#datanb').is("20 GB"))
$('#lol').text('19€ - 1semaine - 30gb');


How do I fix it?

Answer

To do this you can simply concatenate the selected value in to the string you set as the text() of the #lol element. Try this:

$('#datanb').change(function() {
  $('#lol').text('19€ - 1semaine - ' + this.value + 'gb');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="option">
  <h4 class="form-label">Quantité de data</h4>
  <select class="selectpicker" name="Quantité de data" id=datanb>
    <option value="10">10 gb</option>
    <option value="20" selected>20 gb</option>
    <option value="30">30 gb</option>
  </select>
</div>

<h2 class="price" id="lol">19€ - 1semaine - 20gb</h2>

Comments