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>

Answer 2

我有一个普通的JavaScript解决方案（也没有JQuery）。这很容易实现。在您的html上，进行以下更改：

<div>
  <select name="payment-method" id="select-payment" onChange="selectOption(this);">
    <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>

在您的javascript文件上，

function selectOption(select) {
  console.log(select.options[select.selectedIndex].text);
}

Answer 3

如果您使用jQuery，请尝试如下操作：

$("select[name=payment-method] option:selected").text();

在vanilla.js中：

let selectbox=document.querySelector("select[name='payment-method']");
var text=selectbox.options[selectbox.selectedIndex].text;

Answer 4

您可以尝试以下方法：

try {
  var selectedOption = document.getElementsById('payment-method').selectedOptions
  var value = selectedOption && selectedOption[0].text
} catch (err) {
  console.log('Element not found')
}

如何从选择选项中获取儿童跨度文本

4 个答案: