Title: Change select drop down to checkboxes using JavaScript
Last modified: August 31, 2016

---

# Change select drop down to checkboxes using JavaScript

 *  [amandathewebdev](https://wordpress.org/support/users/amandathewebdev/)
 * (@amandathewebdev)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/change-select-drop-down-to-checkboxes-using-javascript-1/)
 * The reason I would like to do this, is that it will be situational. If a user
   is logged in, they will see drop downs. If not, they will see a list of text.
   Ideally just plain text, but I don’t know if that’s possible, so I was thinking
   I could convert the `<select>` to checkboxes and hide the check boxes with CSS.
 * Basically we don’t want a user who isn’t logged in to feel they can select anything,
   because they won’t be able to order and this could lead to frustration. But we
   would still like them to view what options are available for each product as 
   unselectable text. If there is a better way to do this than what I’m thinking,
   I’d be grateful for suggestions. For now, this is what I’ve patched together,
   but it’s not changing the select to checkboxes.
 * I grabbed some code from here to use as a starting point: [http://www.w3schools.com/jsref/met_element_setattribute.asp](http://www.w3schools.com/jsref/met_element_setattribute.asp)
 * Also, I can’t grab the `<select>` by id, because this will be on all `<select
   >`‘s.
 *     ```
       <select id="unique_id" class="unique_class"  data-attribute_name="unique_attribute_name" name="unique_name">
           <option value="" selected="selected">Choose an option</option>
           <option class="attached enabled" value="516">5/16"</option>
           <option class="attached enabled" value="38">3/8"</option>
       </select>
       ```
   
 * Javascript:
 *     ```
       function myFunction() {
           document.getElementsByTagName("SELECT")[0].setAttribute("type", "checkbox");
       }
       ```
   
 * Here is a fiddle: [https://jsfiddle.net/d4qdekom/](https://jsfiddle.net/d4qdekom/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [digitalnord](https://wordpress.org/support/users/digitalnord/)
 * (@digitalnord)
 * [10 years ago](https://wordpress.org/support/topic/change-select-drop-down-to-checkboxes-using-javascript-1/#post-7219796)
 * This is one way to do it with jQuery:
 *     ```
       jQuery(document).ready(function ($) {
       	var $select = $('#unique_id');
       	var $list = $('<ul>').insertBefore($select);
   
       	$select.find('option').each(function () {
       		var val = $(this).val();
       		if (!val) return;
       		$list.append('<li>' + val + '</li>');
       	});
       });
       ```
   
 *  [sachinpal918](https://wordpress.org/support/users/sachinpal918/)
 * (@sachinpal918)
 * [10 years ago](https://wordpress.org/support/topic/change-select-drop-down-to-checkboxes-using-javascript-1/#post-7219798)
 * Here is one awesome article by javascriptstutorial, they have explained how to
   [Select a drop down option using javascript](http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery/)

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Change select drop down to checkboxes using JavaScript’ is closed to 
new replies.

## Tags

 * [checkboxes](https://wordpress.org/support/topic-tag/checkboxes/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [select](https://wordpress.org/support/topic-tag/select/)

 * 2 replies
 * 3 participants
 * Last reply from: [sachinpal918](https://wordpress.org/support/users/sachinpal918/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/change-select-drop-down-to-checkboxes-using-javascript-1/#post-7219798)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics