Change radio buttons to drop down on mobile devices

Anonymous

#97723

Hi,

Can someone point me in the right direction on how I can achieve to display Drop Down list instead of Radio buttons for the filter on mobile devices?

I got this far:

// Create the dropdown base for the Filter
jQuery("<select  id="md-dropdown-filter"></select>").appendTo(".sf-field-category");

// Create default option "Filter Simulations..."
jQuery("<option ></option>", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Filter Simulations..."
}).appendTo(".sf-field-category select");

// Populate dropdown with filter items
jQuery(".sf-field-category li").each(function() {
 var el = jQuery(this);
 jQuery("<option ></option>", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo(".sf-field-category select");
}); 

But I don’t know how to generate the value for the filter.

Kind regards,
Gabriel

Anonymous

#97731

Update of the code above:

Closer but not yet there 🙂

// Create the dropdown base for the Filter
jQuery("<select ></select>").appendTo(".sf-field-category");

// Create default option "Filter Simulations..."
jQuery("<option ></option>", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Filter Simulations..."
}).appendTo(".sf-field-category select");

// Populate dropdown with filter items
jQuery(".sf-field-category li").each(function() {
 var el = jQuery(this);
 jQuery("<option ></option>", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo(".sf-field-category select");
});
//basicaly I need to change here the value to lowercase and add  ?_sft_category=  before it in the URL 
jQuery(".sf-field-category select").change(function() {
  window.location = jQuery(this).find("option:selected").val();
});

Trevor

#97939

I am not understanding what you are trying to do here.

Are you trying to add a new filter field to the form, or convert a field in the form from one type to another?

Anonymous

#97954

This reply has been marked as private.

Trevor

#97958

Ah, I understand. Does your theme have options for widget areas to show/hide widgets for mobile/desktop etc?

Anonymous

#97960

Oh boy, of course. I just didn’t think about this solution 🙂
So I just duplicate the Filter form, change the type of filter for the second one to the drop-down and display only on mobile/tablets?

Trevor

#97965

Yes. Let me know if that works and if I can close this thread?

Anonymous

#97984

Yes, it works! Thank you for your help. You can close this thread.

[Author]

Posts