Jquery Script: Convert Select Dropdown to Selectable Boxes/Div

JavaScript
,
1

I have a select dropdown, but my site select options typically look like this:

As selectable boxes.

Is there a jquery that can convert a dropdown select input to selectable boxes? I’m converting right now to pretty dropdown and was hoping I could just edit some CSS, but it’s a hot mess. Seeing if a simpler script.

Cheers!
Ryan

2

What’s the definition of “selectable boxes”? A radio selection with only the labels visible?

3

selectable boxes like this:

image
image992×500 99.3 KB

4

So yeah, that’s just a Radio with the dots hidden.
jQuery UI can render those with something like:

    <div id="radio">
      <input type="radio" id="cking" name="size">
      <label for="cking">California King</label>
      <input type="radio" id="king" name="size" checked="checked">
      <label for="king">King</label>
      <input type="radio" id="queen" name="size">
      <label for="queen">Queen</label>
      <input type="radio" id="full" name="size">
      <label for="full">Full</label>
    </div>

(probably want some values in there, but you get the point)

$(function() {
  $("#radio").controlgroup({
    classes: {
      "ui-controlgroup": "nodot"
    }
  });
});

div.nodot input {
  display: none;
}
div.nodot label {
  border: 1px solid black;
  border-radius: 3px;
  padding: 2px;
}
div.nodot label.ui-checkboxradio-checked {
  border: 1px solid blue;    
  background-color: rgba(0,0,255,0.2)
}

5

nice!

My next question is how do I convert a SELECT dropdown input into that?

6

As your website is setting off Avast’s malware alarms, I cant visit it… what’s the code on the current dropdown?

7

I saw that too. I think a plugin got commandeered and is injecting. I need to see which plugin is doing that.

My shopify site in production. I’m doing pretty dropdowns with jquery, which control hidden select dropdowns. thinking I may do the selection boxes to better match look of overall site.

8 
<select class="thpb_combo_p_grid_variant_select" data-placeholder="Select a Size" style="visibility: hidden; height: 36px;">
<optgroup label="Select a Size"></optgroup>
<option value="California King">California King</option>
<option value="King">King</option>
<option value="Queen">Queen</option>
<option value="Full">Full</option>
</select>

=>

<div> Some kind of Title for "Select A Size" goes here.</div>    
<div id="radio">
      <input type="radio" id="cking" name="size" value="California King">
      <label for="cking">California King</label>
      <input type="radio" id="king" name="size" value="King">
      <label for="king">King</label>
      <input type="radio" id="queen" name="size" value="Queen">
      <label for="queen">Queen</label>
      <input type="radio" id="full" name="size" value="Full">
      <label for="full">Full</label>
    </div>
9

Ahh, thank you.

Unfortunately the dropdown is dynamically generated after pageload by a bundle plugin on shopify, I can’t do a static edit of it. I run Pretty Dropdowns jquery after existence of those DOM elements are established to create the pretty dropdowns instead.

I’m trying to have a jquery function in waiting to run a loop on the select options and build select boxes instead.

Either way, the plugin responds to when its own dropdowns get changed, so I have to build something that after I change to another option, I alert the plugin by triggering a change on the hidden dropdowns.

If I can’t loop it, I may just have a static html to insert after the generation of the original select dropdowns, hide them, and just have onclick functions explaining to change to particular value in a particular dropdown.

I love the Pretty Dropdowns jquery plugin because it automatically loops and creates the visible pretty dropdowns on the fly, depending on what is in the original dropdowns.

I could co a lot of CSS !important rules to possibly get that output, which is meant to dropdown, to look like the rest of the site.

10 
$('.thpb_combo_p_grid_variant_select').prettyDropdown();
$('.thpb_combo_p_grid_variant_select').on("change", function(){})

I run these after the element is created.

… so I was trying to come up with a jquery loop that would take the created dropdowns and output the select boxes instead of doing a full HTML insert.

11

I guess the good news is that my lady likes the dropdowns best anyway. :slight_smile:

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.