Question

我想知道将选择菜单转换为具有初始选择状态的按钮的最佳方法是什么。

我在Stackoverflow上搜索了这个解决方案，这是我发现的唯一链接。但是，如果只选择了一个带有＆＃34;选择＆＃34;的项目，那么代码中的错误会使所有项目最初被选中。属性应突出显示。 Original Stackoverflow Post

＆＃13;

$(function() {
  $("select option").unwrap().each(function() {
    var btn = $('<div class="btn">' + $(this).text() + '</div>');
    if ($(this).is(':checked')) btn.addClass('on');
    $(this).replaceWith(btn);
  });


  $(document).on('click', '.btn', function() {
    $('.btn').removeClass('on');
    $(this).addClass('on');
  });
});

＆＃13;

div.btn {
  display: inline-block;
  /** other styles **/
}

div.btn.on {
  background-color: #777;
  color: white;
  /** styles as needed for on state **/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text">
     <option selected>Yes</option>
     <option>No</option>
    </select>

＆＃13;

Answer 1

如果要检查<option>元素是否具有selected属性，可以使用DOM节点上的Elements.hasAttribute()以原生JS方式执行此操作，即：< / p>

this.hasAttribute('selected')

如果你想使用jQuery，这仍然是可能的，但对我的喜欢有点过于冗长：

$(this).is('[selected]')：只需使用attribute selector [...]

selected

$(this).attr('selected')将返回true / false布尔值。如果你想要一个超级详细的解决方案，请参阅下一个解决方从技术上讲，选中的是布尔属性，因此这种检查通常是不够的
$(this).attr('selected') !== false && typeof $(this).attr('selected') !== 'undefined'：see explanation here。

$(function() {
  $("select option").unwrap().each(function() {
    var btn = $('<div class="btn">' + $(this).text() + '</div>');
    if (this.hasAttribute('selected')) btn.addClass('on');
    $(this).replaceWith(btn);
  });


  $(document).on('click', '.btn', function() {
    $('.btn').removeClass('on');
    $(this).addClass('on');
  });
});

div.btn {
  display: inline-block;
  /** other styles **/
}

div.btn.on {
  background-color: #777;
  color: white;
  /** styles as needed for on state **/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text">
  <option selected>Yes</option>
  <option>No</option>
</select>

Answer 2

您需要检查属性的值＆＃39;已选中＆＃39;而不是检查＆＃39;。

＆＃13;

$(function() {
  $("select option").unwrap().each(function() {
    var btn = $('<div class="btn">' + $(this).text() + '</div>');
    if ($(this).attr('selected') == 'selected') btn.addClass('on');
    $(this).replaceWith(btn);
  });


  $(document).on('click', '.btn', function() {
    $('.btn').removeClass('on');
    $(this).addClass('on');
  });
});

＆＃13;

div.btn {
  display: inline-block;
  /** other styles **/
}

div.btn.on {
  background-color: #777;
  color: white;
  /** styles as needed for on state **/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text">
     <option selected>Yes</option>
     <option>No</option>
    </select>

＆＃13;

Answer 3

只需将以下代码替换为您的代码。

if ($(this).attr('selected')) btn.addClass('on');

您的代码： if（$（this）.is（'：checked'））btn.addClass（'on'）;

替换代码： if（$（this）.attr（'selected'））btn.addClass（'on'）;

$(function() {
  $("select option").unwrap().each(function() {
    var btn = $('<div class="btn">' + $(this).text() + '</div>');
    if ($(this).attr('selected')) btn.addClass('on');
    $(this).replaceWith(btn);
  });


  $(document).on('click', '.btn', function() {
    $('.btn').removeClass('on');
    $(this).addClass('on');
  });
});

div.btn {
  display: inline-block;
  /** other styles **/
}

div.btn.on {
  background-color: #777;
  color: white;
  /** styles as needed for on state **/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text">
     <option selected>Yes</option>
     <option>No</option>
    </select>

Answer 4

选择它们的原因是，当它们被替换时，下一个被选中。此外，当您打开“选择”时，它将从表单中删除，因此不会提交帖子数据。我创建了一个JS Fiddle来纠正这两个问题，并更新所有选择的组合，以便它们独立工作。

CSS代码：

div.btn {
  display: inline-block;
  border: 2px solid #ccc;
  margin-right: 5px;
  padding: 2px 5px;
  cursor: pointer;
}

div.btn.on {
  background-color: #777;
  color: white;
}

Jquery代码：

$("select").each(function() {
  var sname = $(this).attr('name');
  var thissel = $(this);
  console.log();
  $(this).append('<input id="sel'+sname+'" type="hidden" name="' + sname + '" value="'+$(thissel).val()+'">');
  $(thissel).children("option").unwrap().each(function(i) {
    var btn = $('<div class="btn" name="' + sname + '">' + $(this).text() + '</div>');
    if (i==0) btn.addClass('on');
    $(this).replaceWith(btn);
  });
});

$(document).on('click', '.btn', function() {
  var name = $(this).attr("name");
  console.log($(this).html());
  $("#sel"+name).val($(this).html());
  var selector = '.btn[name="' + name + '"]'
  $(selector).removeClass('on');
  //$('.btn').removeClass('on');
  $(this).addClass('on');
});

将选择菜单转换为按钮，并选择默认值

4 个答案: