Select option button in html

How TO — Custom Select Box

Learn how to create custom select boxes with CSS and JavaScript.

Custom Select Box

Create a Custom Select Menu

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* The container must be positioned relative: */
.custom-select position: relative;
font-family: Arial;
>

.custom-select select display: none; /*hide original SELECT element: */
>

.select-selected background-color: DodgerBlue;
>

/* Style the arrow inside the select element: */
.select-selected:after position: absolute;
content: «»;
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
>

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after border-color: transparent transparent #fff transparent;
top: 7px;
>

/* style the items (options), including the selected item: */
.select-items div,.select-selected color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
>

/* Style items (options): */
.select-items position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
>

/* Hide the items when the select box is closed: */
.select-hide display: none;
>

.select-items div:hover, .same-as-selected background-color: rgba(0, 0, 0, 0.1);
>

Step 3) Add JavaScript:

Example

var x, i, j, l, ll, selElmnt, a, b, c;
/* Look for any elements with the class «custom-select»: */
x = document.getElementsByClassName(«custom-select»);
l = x.length;
for (i = 0; i < l; i++) selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/* For each element, create a new DIV that will act as the selected item: */
a = document.createElement(«DIV»);
a.setAttribute(«class», «select-selected»);
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/* For each element, create a new DIV that will contain the option list: */
b = document.createElement(«DIV»);
b.setAttribute(«class», «select-items select-hide»);
for (j = 1; j < ll; j++) /* For each option in the original select element,
create a new DIV that will act as an option item: */
c = document.createElement(«DIV»);
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener(«click», function(e) /* When an item is clicked, update the original select box,
and the selected item: */
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName(«select»)[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) if (s.options[i].innerHTML == this.innerHTML) s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName(«same-as-selected»);
yl = y.length;
for (k = 0; k < yl; k++) y[k].removeAttribute("class");
>
this.setAttribute(«class», «same-as-selected»);
break;
>
>
h.click();
>);
b.appendChild(c);
>
x[i].appendChild(b);
a.addEventListener(«click», function(e) /* When the select box is clicked, close any other select boxes,
and open/close the current select box: */
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle(«select-hide»);
this.classList.toggle(«select-arrow-active»);
>);
>

function closeAllSelect(elmnt) /* A function that will close all select boxes in the document,
except the current select box: */
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName(«select-items»);
y = document.getElementsByClassName(«select-selected»);
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) if (elmnt == y[i]) arrNo.push(i)
> else y[i].classList.remove(«select-arrow-active»);
>
>
for (i = 0; i < xl; i++) if (arrNo.indexOf(i)) x[i].classList.add("select-hide");
>
>
>

/* If the user clicks anywhere outside the select box,
then close all select boxes: */
document.addEventListener(«click», closeAllSelect);

Источник

How to 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

 
sun mon tue wed thu fri sat

Is it possible to convert a select menu to buttons?

Hidden element added for form submission of chosen value.

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

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

$("select option").unwrap().each(function() var btn = $('
'+$(this).text()+'
'); 
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 **/
>

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.

Red
Blue
Green

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!

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.

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

 
 
MENU
 

 
 
 
 
Food 
Drink 

 
 



Order
 

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

 
 
 Apartment/Flat 
 
 Bechelor 


 
 
Anyone 
Family 
Bechelor 

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

Here is a something quick that should get you going.

 Select One Two Three 
First content
 
Second content
 
Third content

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.

Источник