JS как из select получить значит и value и data-myval

Question

Подскажите, пожалуйста, как из одного select получать значения value в поле input type=text и с этого же select'a получать значение в span из data-myval?

Вот мой код:

$('select.but').on('click', function() {
    $('#my_field4').val( $(this).val() );
    $('.my_field4_span').text( $(this).val() );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="" style="padding-top:20px">
<select class="but">
  <option data-myval="a2" value="a1">a</option>
  <option data-myval="b2" value="b1">b</option>
  <option data-myval="c2" value="c1">c</option>
</select>

<input type="text" id="my_field4" value="">
<span class="my_field4_span"> </span>
</div>

Так же код в редакторе: https://jsfiddle.net/synapse3/w0kr82a7/14/

Answer 1

$('select.but').on('change', function() {
  $('#my_field4').val($(this).val());
  $('.my_field4_span').text($(this).find('option:selected').data('myval'));
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="" style="padding-top:20px">
  <select class="but">
    <option data-myval="a2" value="a1">a</option>
    <option data-myval="b2" value="b1">b</option>
    <option data-myval="c2" value="c1">c</option>
  </select>

  <input type="text" id="my_field4" value="">
  <span class="my_field4_span"> </span>
</div>

БЛОГ НА HUSL

JS как из select получить значит и value и data-myval

Ответы (1 шт):