转换选择默认的选择菜单到按钮

Question

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

我在Stackoverflow上搜索了这个解决方案，这是我发现的足够接近的唯一链接。但是，如果只有一个具有“selected”属性的项目应该突出显示，那么代码在制作所有最初选定的项目时会出错。 Original Stackoverflow Post

$(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'); 
 
    }); 
 
});

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 1

如果你想检查是否有<option>元件具有selected的属性，你可以简单地做它的原生JS方式由DOM节点上使用Elements.hasAttribute()，即：

this.hasAttribute('selected') 

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

• $(this).is('[selected]')：简单地检查，如果元件具有使用如果指定所选择的属性是attribute selector [...]
• $(this).attr('selected')将返回一个真/假布尔属性selected。如果你想要一个超级详细的解决方案，请参阅下一个解决方案从技术上来讲，选择是布尔属性，所以这个检查是—往往不是—足够
• $(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

您需要检查属性 '选择'，而不是 '检查' 的值。

$(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'); 
 
    }); 
 
});

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 3

只需更换下面一行到你的代码。

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

代码： 如果（$（本）。是（ '：检查'））btn.addClass（ '上'）; （$（this）.attr（'selected'））btn.addClass（'on'）;如果（$（this）.attr（''''））;

$(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'); 
});