html - 在 <option=class>...</option> 之间更改文本

标签 html css html-select

我有这个代码:

<select class="cc-product-variant-selectbox j-product__variants" data-action="changeVariant">
  <option class="j-product__variants__item" value="0" data-params="{&quot;price&quot;:158,&quot;priceFormatted&quot;:&quot;158,00 \u20ac&quot;,&quot;oldPriceFormatted&quot;:&quot;0,00 \u20ac&quot;,&quot;basicPrice&quot;:0,&quot;basicPriceFormatted&quot;:&quot;0,00 \u20ac&quot;,&quot;basicPriceUnit&quot;:&quot;&amp;nbsp;&quot;,&quot;oldPrice&quot;:0,&quot;availability&quot;:1,&quot;availabilityText&quot;:&quot;disponibile&quot;,&quot;delivery&quot;:2,&quot;pool&quot;:&quot;Infinity&quot;,&quot;weightFormatted&quot;:&quot;0,1 kg&quot;,&quot;weight&quot;:0.1}"
          title="1 metro     158,00 €" content="1 metro" selected="selected">
    1 metro 158,00 €</option>

我会在“1 metro”中更改保管箱文本“1 metro 158,00 €”(介于 <option>..</option> 之间),因此没有价格。我在 css 中试过这段代码:

.j-product__variants__item"{content:"1 metro";}

但它不起作用。 我该如何解决?

最佳答案

快速而肮脏的 Javascript 解决方案:

// document.querySelectorAll('.j-product__variants__item')[0].innerHTML = document.querySelectorAll('.j-product__variants__item')[0].textContent.replace('158,00 €','');
<body onload="document.querySelectorAll('.j-product__variants__item')[0].innerHTML = document.querySelectorAll('.j-product__variants__item')[0].textContent.replace('158,00 €','');">
  <select class="cc-product-variant-selectbox j-product__variants" data-action="changeVariant">
    <option class="j-product__variants__item" value="0" data-params="{&quot;price&quot;:158,&quot;priceFormatted&quot;:&quot;158,00 \u20ac&quot;,&quot;oldPriceFormatted&quot;:&quot;0,00 \u20ac&quot;,&quot;basicPrice&quot;:0,&quot;basicPriceFormatted&quot;:&quot;0,00 \u20ac&quot;,&quot;basicPriceUnit&quot;:&quot;&amp;nbsp;&quot;,&quot;oldPrice&quot;:0,&quot;availability&quot;:1,&quot;availabilityText&quot;:&quot;disponibile&quot;,&quot;delivery&quot;:2,&quot;pool&quot;:&quot;Infinity&quot;,&quot;weightFormatted&quot;:&quot;0,1 kg&quot;,&quot;weight&quot;:0.1}"
    title="1 metro     158,00 €" content="1 metro" selected="selected">
      1 metro 158,00 €</option>
  </select>
</body>

关于html - 在 <option=class>...</option> 之间更改文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41611348/

相关文章:

html - 双背景图像顶部和底部

javascript - 您可以通过 JavaScript 导航到浏览器中的 anchor 而不更新 URL 吗?

html - 边框左上切

html - 如何创建复选框来更改文档的 CSS 和 Javascript?背景颜色切换

html - IE 11 以不同于其他浏览器的方式显示 CSS

html - 如何在 CSS 中制作没有图像的自定义选择选项菜单样式?

html - Angular 2 : <li> with *ngFor not inside <ul>

html - 在 ul :focus 上切换下拉菜单

javascript - 在 IE 上捕获 HTML 选项元素的鼠标事件

javascript - 使用 javascript/jquery 根据另一个选择的值显示/隐藏选择选项?