Forums › Forums › Search & Filter Pro › Change radio buttons to drop down on mobile devices

Viewing 8 posts - 1 through 8 (of 8 total)
  • Anonymous
    (Private)  March 18, 2017 at 8:58 pm #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
    (Private)  March 18, 2017 at 9:35 pm #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
    (Private)  March 20, 2017 at 2:02 pm #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
    (Private)  March 20, 2017 at 2:08 pm #97954
    This reply has been marked as private.
    Trevor
    (Private)  March 20, 2017 at 2:12 pm #97958

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

    Anonymous
    (Private)  March 20, 2017 at 2:19 pm #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
    (Private)  March 20, 2017 at 2:20 pm #97965

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

    Anonymous
    (Private)  March 20, 2017 at 2:45 pm #97984

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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)