Question

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

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

标记：重复多次，每个框将具有不同的selected值。

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

将选择值附加到标题

1 个答案: