轉換選擇默認的選擇菜單到按鈕

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