jquery получить всю выбранную опцию в html

Question

Есть ли возможность получить все опции html из выбранного выпадающего списка. В то время как у меня есть

<select class="myselect">
  <option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
  <option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>

, я хотел бы получить полный вариант:

<option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>

Насколько я пытался, я могу получить все варианты в html:

$('.myselect').html()

Или только один данные:

$('.myselect').find(':selected').data('one')

Или только одно значение

$('.myselect').find(':selected').val()

Так что есть простой способ получить выбранную целую html опцию из

... в

Answer 1

Как это - не ясно, хотите ли вы тег или атрибуты данных, поэтому здесь либо

$(".myselect").on("change",function() {
  console.log(this.options[this.selectedIndex]); // complete tag
  console.log(this.options[this.selectedIndex].dataset); // array of data attribute values
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="myselect">
  <option value="">Please select</option>
  <option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
  <option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>

Answer 2

Я не совсем ясно, какой именно результат вы хотели, поэтому вот несколько идей, чтобы получить вещи, которые могут вас заинтересовать:

1) Чтобы получить имена и значения всех данных- Атрибуты вы можете просто вызвать .data() без каких-либо аргументов, и он вернет все атрибуты данных и их значения в объекте. Также есть пример в документации .

2) Чтобы получить все HTML выбранного элемента, вы можете использовать outerHTML для элемента DOM, найденного jQuery.

Демо каждого ниже:

//to get the data-attributes
var selectedData = $('.myselect').find(':selected').data();
console.log(selectedData);

//to get the HTML of the selected item:
var selected = $('.myselect').find(':selected')[0].outerHTML;
console.log(selected);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="myselect">
  <option data-one="11" data-two="11" data-three="111" value="1">Some text here</option>
  <option data-one="22" data-two="22" data-three="222" value="2">Some text here2</option>
</select>