将选项值转换为链接 - Javascript

Question

我有这个Javascript，可以将选择输入转换为ul，将选项转换为li。 option value="something"变为li rel="something"。

示例：

This:
<select><opion value="something">Some text</option></select>

It becomes this:
<ul><li rel="something">Some text</li></ul>

如何使用此代码将option value="something"转换为<li><a href="something">some text</a>？我遇到了一些问题而我无法做到。有人可以帮帮我吗？

$('select').each(function () {
  var $this = $(this), numberOfOptions = $(this).children('option').length;

  $this.addClass('select-hidden');
  $this.wrap('<div class="select"></div>');
  $this.after('<div class="select-styled"></div>');

  var $styledSelect = $this.next('div.select-styled');
  $styledSelect.text($this.children('option').eq(0).text());

  var $list = $('<ul />', {
    'class': 'select-options'
  }).insertAfter($styledSelect);

  for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  var $listItems = $list.children('li');

  $styledSelect.click(function (e) {
    e.stopPropagation();
    $('div.select-styled.active').not(this).each(function () {
      $(this).removeClass('active').next('ul.select-options').hide();
    });
    $(this).toggleClass('active').next('ul.select-options').toggle();
  });

  $listItems.click(function (e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
  });

  $(document).click(function () {
    $styledSelect.removeClass('active');
    $list.hide();
  });
});

Jsfiddle中的代码https://jsfiddle.net/felipeemarcon/c8pouz8s/3/

感谢。

Answer 1

请尝试以下操作：

＆＃13;

＆＃13;

$('select').each(function () {
  var $this = $(this), numberOfOptions = $(this).children('option').length;

  $this.addClass('select-hidden');
  $this.wrap('<div class="select"></div>');
  $this.after('<div class="select-styled"></div>');

  var $styledSelect = $this.next('div.select-styled');
  $styledSelect.text($this.children('option').eq(0).text());

  var $list = $('<ul />', {
    'class': 'select-options'
  }).insertAfter($styledSelect);

  for (var i = 0; i < numberOfOptions; i++) {
    
    $('<a />', {
      text: $this.children('option').eq(i).text(),
      href: $this.children('option').eq(i).val()
    }).appendTo($('<li />').appendTo($list));
    /*
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
    */

  }

  var $listItems = $list.children('li');

  $styledSelect.click(function (e) {
    e.stopPropagation();
    $('div.select-styled.active').not(this).each(function () {
      $(this).removeClass('active').next('ul.select-options').hide();
    });
    $(this).toggleClass('active').next('ul.select-options').toggle();
  });

  $listItems.click(function (e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
  });

  $(document).click(function () {
    $styledSelect.removeClass('active');
    $list.hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="something 1">Some text 1</option>
<option value="something 2">Some text 2</option>
<option value="something 3">Some text 3</option>
<option value="something 4">Some text 4</option>
</select>

＆＃13;

＆＃13;

＆＃13;

$('<li />', {
  text: $this.children('option').eq(i).text(),
  rel: $this.children('option').eq(i).val()
}).appendTo($list);

此部分从<li>生成<option>。

因此，如下更改<a>。

$('<a />', {
  text: $this.children('option').eq(i).text(),
  href: $this.children('option').eq(i).val()
}).appendTo($('<li />').appendTo($list));

Answer 2

改变代码......

$('select').each(function () {
  var $this = $(this), numberOfOptions = $(this).children('option').length;

  $this.addClass('select-hidden');
  $this.wrap('<div class="select"></div>');
  $this.after('<div class="select-styled"></div>');

  var $styledSelect = $this.next('div.select-styled');
  $styledSelect.text($this.children('option').eq(0).text());

  var $list = $('<ul />', {
    'class': 'select-options'
  }).insertAfter($styledSelect);

  for (var i = 0; i < numberOfOptions; i++) {
    let $a = $('<a />', {
      href: $this.children('option').eq(i).val(),
      text: $this.children('option').eq(i).text()
    });
    let $li = $('<li />');
    $a.appendTo($li);
    $li.appendTo($list);
  }

  var $listItems = $list.children('li');

  $styledSelect.click(function (e) {
    e.stopPropagation();
    $('div.select-styled.active').not(this).each(function () {
      $(this).removeClass('active').next('ul.select-options').hide();
    });
    $(this).toggleClass('active').next('ul.select-options').toggle();
  });

  $listItems.click(function (e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
  });

  $(document).click(function () {
    $styledSelect.removeClass('active');
    $list.hide();
  });
});

https://jsfiddle.net/4x2yvs3L/