javascript - 将选择值附加到标题

Question

我试图将每个 div 的选择值附加到其标题中。如何获取每个 div 中的值然后附加它？

我想在页面加载时附加此内容，而不是等到单击或更改生效。这是一个jsfiddle https://jsfiddle.net/dqfvyvdt/2/

标记:重复多次，每个框都会有不同的选定值。

<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
    <option selected="selected" value="car">Car</option>
    <option value="car">Bike</option>
    <option value="truck">Truck</option>
    <option value="skateboard">Skateboard</option>
    <option value="skooter">Skooter</option>
</select>
</div>

JS:

var title = $('.module').find('h3');
var type = $('.module').find('.type').val();

$(title).append(type);

Answer 1

$('.module').find('.type').val() 获取第一个type元素的值，需要找到与 h3 元素相关的每种类型的值。

因此，您需要迭代 h3 并找到每个的 type 值并将其添加到其内容中

使用.append()

$('.module h3').append(function(i, text){
    return  $(this).next().val()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
    <h3>This is a </h3>
    <select name="type" class="type">
        <option value="car">Car</option>
        <option value="bike">Bike</option>
        <option value="truck">Truck</option>
        <option value="skateboard">Skateboard</option>
        <option value="skooter">Skooter</option>
    </select>
</div>
<div class="module">
    <h3>This is a </h3>
    <select name="type" class="type">
        <option value="car">Car</option>
        <option value="bike" selected>Bike</option>
        <option value="truck">Truck</option>
        <option value="skateboard">Skateboard</option>
        <option value="skooter">Skooter</option>
    </select>
</div>
<div class="module">
    <h3>This is a </h3>
    <select name="type" class="type">
        <option value="car">Car</option>
        <option value="bike">Bike</option>
        <option value="truck">Truck</option>
        <option value="skateboard">Skateboard</option>
        <option value="skooter" selected>Skooter</option>
    </select>
</div>

<小时/>

如果您还想更新更改的内容，那么

$('.module .type').change(function(i, text) {
  var $this = $(this);
  $this.prev().find('.h3-type').text($(this).find('option:selected').text());
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
  <h3>This is a <span class="h3-type"></span></h3>
  <select name="type" class="type">
    <option value="car">Car</option>
    <option value="bike">Bike</option>
    <option value="truck">Truck</option>
    <option value="skateboard">Skateboard</option>
    <option value="skooter">Skooter</option>
  </select>
</div>
<div class="module">
  <h3>This is a <span class="h3-type"></span></h3>
  <select name="type" class="type">
    <option value="car">Car</option>
    <option value="bike" selected>Bike</option>
    <option value="truck">Truck</option>
    <option value="skateboard">Skateboard</option>
    <option value="skooter">Skooter</option>
  </select>
</div>
<div class="module">
  <h3>This is a <span class="h3-type"></span></h3>
  <select name="type" class="type">
    <option value="car">Car</option>
    <option value="bike">Bike</option>
    <option value="truck">Truck</option>
    <option value="skateboard">Skateboard</option>
    <option value="skooter" selected>Skooter</option>
  </select>
</div>