Change text value HTML with jQuery

Question

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 theselectpickers.

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?

Rory McCrossan · Accepted Answer · 2016-10-05 09:40:32Z

3

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>

answered Oct 5, 2016 at 9:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

darkraja Over a year ago

Thanks :) and to edit the text like 19€ - 1semaine - 10gb for 10 selected // 29 euro for 20 selected // 39 euro for 30 selected * per weeks numbers in another select-pikers named (id ) "weeknb" ?

Sudharsan S · Accepted Answer · 2016-10-05 09:49:54Z

0

Use .change event in jquery

    $('#datanb').change(function() {
      $('#lol').text('19€ - 1semaine - ' + $(this).val() + '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>

edited Oct 5, 2016 at 9:49

answered Oct 5, 2016 at 9:42

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

PinkTurtle · Accepted Answer · 2016-10-05 20:53:48Z

Answering your comment under Rory McCrossan's answer : just add a test on the currently selected value and adjust text accordingly.

$('#datanb').change(function() {
  switch ($(this).val()) {
    case '10' : $('#lol').text('19€ - 1semaine - 10gb'); break;
    case '20' : $('#lol').text('29€ - 1semaine - 20gb'); break;
    case '30' : $('#lol').text('39€ - 1semaine - 30gb'); break;
    default : break;
  }
});

<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">29€ - 1semaine - 20gb</h2>

Collectives™ on Stack Overflow

Change text value HTML with jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related