How to Display Select Options as Buttons

How can I display select options as buttons?

I suggest to use checkbox over select, you'll be able to style buttons fully with a bit of CSS tricks.

#id_work_days input[type="checkbox"] {  display: none;}
#id_work_days span {  display: inline-block;  padding: 10px;  text-transform: uppercase;  border: 2px solid gold;  border-radius: 3px;  color: gold;}
#id_work_days input[type="checkbox"]:checked + span {  background-color: gold;  color: black;}

<p id="id_work_days">  <label><input type="checkbox" name="work_days" value="1"><span>sun</span></label>  <label><input type="checkbox" name="work_days" value="2"><span>mon</span></label>  <label><input type="checkbox" name="work_days" value="3"><span>tue</span></label>  <label><input type="checkbox" name="work_days" value="4"><span>wed</span></label>  <label><input type="checkbox" name="work_days" value="5"><span>thu</span></label>  <label><input type="checkbox" name="work_days" value="6"><span>fri</span></label>  <label><input type="checkbox" name="work_days" value="7"><span>sat</span></label></p>

Is it possible to convert a select menu to buttons?

Update:

Hidden element added for form submission of chosen value.

http://jsfiddle.net/mBUgc/21/

---

Here's a simple implementation of what you are looking to achieve.

Demo: http://jsfiddle.net/mBUgc/19/

JavaScript:

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

CSS:

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

Note: This will work regardless of the number of options you have in your select - http://jsfiddle.net/mBUgc/20/

how to change from a select menu to buttons

If you want to update the item before adding it to the cart (you want the color option on your product page instead of in the cart), you can create multiple buttons and update the data-item-custom1-value on click.

<button class="options" data-value="red">Red</button>
<button class="options" data-value="blue">Blue</button>
<button class="options" data-value="green">Green</button>

const addButton = document.querySelector('#add-button');

document.querySelectorAll('.options').forEach(option => {
  option.addEventListener('click', () => {
    const value = option.getAttribute('data-value')
    addButton.setAttribute('data-item-custom1-value', value)
  })
})

If you want to replace the buttons inside the cart with buttons, this is not possible at the moment, unfortunately. That being said, I will definitively add custom field overrides to our backlog!

You can email us at support@snipcart.com if you have further questions!

Cheers

Lea - Developer at Snipcart

How to make select option as a button

You don't need to have button inside select box rather you can make use of change event of select box and refresh the prize.

see below code

$(function(){   $('#expressShipping-count-0').on('change', function(){       var value = $(this).val();       console.log(value);       // recalculate prize and show   });});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><div class="selectric-hide-select">          <select class="c-ui-select js-ui-select" id="expressShipping-count-0" autocomplete="off" tabindex="-1">           <option value="1">۱</option>                       <option value="2">۲</option>                       <option value="3">۳</option>                       <option value="4" selected="">۴</option>                       <option value="5">۵</option>           </select>   </div>

Display text of select option with button jQuery

You should declare the array outside the click handler function. Also , you probably want to store the label attribute of the selected option. Join the array items with , before showing in the element:

var data = {
    Food: [
        {
            id: 1,
            name: 'Fried Rice',
            price: '10.000'
        },
        {
            id: 2,
            name: 'Fried Noodle',
            price: '9.000'
        },
        {
            id: 3,
            name: 'Pancake',
            price: '8.500'
        },
        {
            id: 4,
            name: 'French Fries',
            price: '7.500'
        }
    ],
    Drink: [
        {
            id: 1,
            name: 'Cola',
            price: '4.600'
        },
        {
            id: 2,
            name: 'Orange Juice',
            price: '5.400'
        },
        {
            id: 3,
            name: 'Mineral Water',
            price: '3.500'
        },
        {
            id: 4,
            name: 'Coffee',
            price: '5.800'
        }
    ]
}

function handleChange() {
    var x = document.getElementById("category_select").value;

    var dataOptions = data[x]
    var dataSelect = document.getElementById('type_select')
    dataSelect.innerHTML = ''

    dataOptions.forEach(function (option) {
        var optionEle = document.createElement('option')
        optionEle.value = option.id
        optionEle.label = option.name

        dataSelect.appendChild(optionEle)
    })

}
handleChange()

$(document).ready(function () {
    var selectMenu = [];
    $("button").click(function () {
        selectMenu.push($("#type_select option:selected").attr('label'));
        $(".result").html(selectMenu.join(', '));
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="container-fluid text-center">
        <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
        <br />
        <div class="row">
            <div class="col-md-6">
                <select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
                    <option value="Food">Food</option>
                    <option value="Drink">Drink</option>
                </select>
            </div>
            <br />
            <div class="col-md-6">
                <select class="form-select form-select-lg mb-3" id="type_select"></select>
            </div>
        </div>
    </div>
</div>
<br />
<button type="button" style="width:50%; margin-left:25%; margin-right:25%">Order</button>
<br />
<div class="result"></div>

show select option depends on button select

I might do it like this instead, setting an array based on the selected button, and then populating the select element with that array, making sure to clear the select element each time.

function radio_click() {
    // Get elements
    var select = document.getElementById("select-occupant");
    var apt = document.getElementById("type_apartment");
    // Reset options
    select.options.length = 0;

    // Set option array based on selected
    if (apt.checked == true) {
        var options = {
            ValueA : 'Anyone',
            ValueB : 'Family',
            ValueC : 'Bachelor'
        };

    } else {
        var options = {
            ValueA : 'Anyone',
            ValueB : 'Student',
            ValueC : 'Job Holder'
        };
    }

    // Set options in select
    for(index in options) {
        select.options[select.options.length] = new Option(options[index], index);
    }
}

<div id="residential" >
   <input type="radio" value="apartment" id="type_apartment" name="type" checked=true onclick="radio_click()">
   <label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
   <input type="radio" value="bachelor" id="type_bachelor" name="type" onclick="radio_click()">
   <label for="type_bachelor" class="radio-inline"> Bechelor  </label>
</div>

<!-- this is the only one needed now -->
<div class="form-group ">
   <select class="form-control" name="tenant" id="select-occupant">
      <option value="">Anyone</option>
      <option  value="family">Family</option>
      <option value="bechelor" >Bechelor</option>
   </select>
</div>

Add a button to Show-Hide based on Select option?

Here is a something quick that should get you going.

$(document).ready(function() { var lastSelected;  $('input').click(function() {   $('#' + lastSelected).hide();    lastSelected = $('#dropDown').val();    $('#' + lastSelected).show()  });});

.hidden {  display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="dropDown">  <option>Select</option>  <option value="item1">One</option>  <option value="item2">Two</option>  <option value="item3">Three</option></select><input type="button" value="view" target="_self"><div class="hidden" id="item1">  <p>First content</p></div><div class="hidden" id="item2">  <p>Second content</p></div><div class="hidden" id="item3">  <p>Third content</p></div>

jQuery select option with button

This is a simple jQuery way of doing it.

$('a').click(function() {
    var select_num = $(this).index() + 1;
    $('#items option').eq(select_num).attr('selected', 'selected');
});

Here is the example fiddle.

---

Related Topics