javascript - 如何从选择选项中获取子跨度文本

Question

我是新手，我一直在尝试弄清楚如何从我选择的选项中获取子跨度文本。我正在尝试从类中获取文本:所选选项中的支付百分比和支付单位。谢谢你真的很感激。

<div>
    <select name="payment-method">
        <option value="paypal"><span class="payment-percent">2.9</span>% + <span class="payment-flat">0.30</span></option>
        <option value="stripe"><span class="payment-percent">3.9</span>% + <span class="payment-flat">0.60</span></option>
    </select>
</div>

Answer 1

html 标签在选项中可能不起作用。相反，您可以使用伪选择器 :selected 获取所选文本，并通过分隔符 + 将其拆分。这将给出一个包含 2 个元素的数组。您可以使用 index 获取元素

$('#payment-method').on('change', function() {
  let selectedText = ($(this).find(":selected").text()).trim().split('+');
  console.log(selectedText[0], selectedText[1]);


})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select name="payment-method" id='payment-method'>
    <option value="paypal"><span class="payment-percent">2.9</span>% + <span class="payment-flat">0.30</span></option>
    <option value="stripe"><span class="payment-percent">3.9</span>% + <span class="payment-flat">0.60</span></option>
  </select>
</div>