时间戳

首页 > 解决方案 > jquery 用于在 woocommerce 中显示每个下拉列表

jquery - jquery 用于在 woocommerce 中显示每个下拉列表

问题描述

我尝试自定义“woocommerce”。每个产品都有自己的变量。我想在每个下拉列表前面显示选定的选项。每个产品都有不同数量的下拉菜单“其中一些不止一个”，我想在其自己的下拉菜单前显示每个下拉选择的值。我可以写一个下拉菜单，但由于下拉菜单的数量不同，我无法正确完成。你能帮我处理 jQuery 代码吗？

在此处输入图像描述

$('select#soflow').on('change', function() {
  var count = $("select#soflow option:selected").text();
  var value = $("select#soflow option:selected").text();
  $("#textvalue").append().html("<span>" + value + "</span>");
})

标签： jquerywordpresswoocommerce

解决方案

由于您的问题没有答案，我只是试图以某种方式解决您的问题，当然这绝对是盲目的，因为我没有看到任何html或这不是常见的元素，无论如何我都没有在示例 woocommerce 网站中看到此部分。您可以使用下面的代码来获取结果，但请注意这是您页面中的select所有select元素，因此请考虑class在您的select元素上查找 a 或由父级选择 ex。.someDiv select或etc在没有任何冲突的情况下工作。

在此示例中，查找所有select option并在更改事件上查找selected值并按类附加span到.dropdown-selected您的选择选项旁边。

$('select').each(function() {
  $(this).on('change', function() {
    $(this).next().closest('.dropdown-selected').remove();
    var value = $(this).find(':selected').text();
    $("<span class='dropdown-selected'>" + value + "</span>").insertAfter($(this));
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dropdown" id="soflow">
  <option>Text 1</option>
  <option>Text 2</option>
  <option>Text 3</option>
</select>
<br/><br/>
<select class="dropdown" id="soflow2">
  <option>Text 4</option>
  <option>Text 5</option>
  <option>Text 6</option>
</select>
<br/><br/>
<select class="dropdown" id="soflow3">
  <option>Text 7</option>
  <option>Text 8</option>
  <option>Text 9</option>
</select>

我帮不了你更多，如果你有任何问题，请尝试这个，评论它！

推荐阅读