jQuery - добавить ввод в метку

Question

У меня есть этот код, который преобразует select / option в радио, но я не знаю, как поместить входные данные внутри каждой созданной метки. Как мне сохранить функцию преобразования, но вместо того, чтобы добавлять метку рядом со входом, поместить ввод внутри метки?

jQuery(".option-list .option").each(function(i, e) {
  if (i != 0) {
    (jQuery("<input type='radio' name='new' />")
      .attr("class", "car-color")
      .attr("value", jQuery(this).val())
      .attr("checked", i == 1)
      .click(function() {
        jQuery(".option-list").val(jQuery(this).val());
      }).add($("<label for=" + this.textContent + ">" + this.textContent + "</label>")))
    .appendTo("#new");

  }
});
jQuery(".option-list").remove();

label {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="option-list">
  <option class="option" value="">Choose Option..</option>
  <option class="option" value="1">Firt</option>
  <option class="option" value="2">Second</option>
  <option class="option" value="3">Third</option>
</select>
<div id="new"></div>

Answer 1

Я разбил шаги, чтобы они были более читабельными. Я создаю ярлык, а затем параметр, определяю, следует ли проверять этот параметр или нет, и затем добавляю их все в DOM.

$(".option-list .option").slice(1).each(function(i, e) {
  var $newLabel = $(`<label for="${e.innerText}">${e.innerText}</label>`);
  var $newOption = $(`<input type="radio" name="new" value="${e.value}" class="car-color" id="${e.innerText}">`);
  
  if (!i) $newOption.prop('checked', true);
  
  $newLabel.append($newOption);
  $('#new').append($newLabel);
});

$(".option-list").remove();

label {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="option-list">
  <option class="option" value="">Choose Option..</option>
  <option class="option" value="1">First</option>
  <option class="option" value="2">Second</option>
  <option class="option" value="3">Third</option>
</select>
<div id="new"></div>

Answer 2

Сначала создайте метку

Но зачем нажимать на кнопку, чтобы установить значение, если вы удаляете выбор?

Также вы забыли идентификатор

const $div = $("#new")
$div.on("click", "[name=new]", function() {
  $(".option-list").val(this.value)
}); // why this if you remove the select???
$(".option-list .option:gt(0)").each(function(i, e) {
  $div.append(
    $("<label/>", {
      for: this.text,
      text: this.text
    }).append(
      $("<input/>", {
        "id": this.text,
        "type": "radio",
        "name": "new",
        "class": "car-color",
        "value": this.value,
        "checked": i===0
      })
    ))
});
// $(".option-list").remove();

label {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="option-list">
  <option class="option" selected value="">Choose Option..</option>
  <option class="option" value="1">First</option>
  <option class="option" value="2">Second</option>
  <option class="option" value="3">Third</option>
</select>
<div id="new"></div>