Блог

Я новичок в этом, и я пытался выяснить, как получить текст дочерней области из выбранной мной опции. Я пытаюсь получить текст из class: payment-percent и payment-flat из выбранной опции. Спасибо, вы действительно это цените.

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

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>  

У меня есть ванильное решение на 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);
}
  

Если вы используете 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;
  

Вы могли бы попробовать это:

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