Question

我有这个HTML代码：

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

值20为10或30，具体取决于selectpickers。

中的值

我用jQuery尝试过这个，但是不起作用。

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');

我该如何解决？

Answer 1

要执行此操作，您只需将所选值连接到您设置为text()元素的#lol的字符串即可。试试这个：

$('#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>

Answer 2

在jquery中使用.change事件

＆＃13;

    $('#datanb').change(function() {
      $('#lol').text('19€ - 1semaine - ' + $(this).val() + 'gb');
    });

＆＃13;

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

＆＃13;

Answer 3

根据Rory McCrossan的回答回答您的评论：只需对当前选定的值添加测试并相应地调整文本。

$('#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>

使用jQuery更改文本值HTML

3 个答案: