-1

how can I change dynamic select options into links?

<select id="input-sort" class="form-control" onchange="location = this.value;">
   {% for sorts in sorts %}
   {% if sorts.value == '%s-%s'|format(sort, order) %}
   <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
   {% else %}
   <option value="{{ sorts.href }}">{{ sorts.text }}</option>
   {% endif %}
   {% endfor %}
</select>

which gives the result as

Select the option...

  • List item 1
  • List item 2
  • List item 3
  • List item 4

where I want to be

select: List item 1 List item 2 List item 3 List item 4

Here I found this question similar to mine but it is not working in my condition link1 link

Muhammed
  • 69
  • 1
  • 12
  • ``. An interactive tag cannot be nested within another interactive tag. The browser will remove the nested tag (i.e. buttons will be removed automatically.) Furthermore, the only tags allowed as a child to ` – zer00ne Feb 24 '19 at 04:04
  • @zer00ne then there is no solution for this? – Muhammed Feb 24 '19 at 04:07
  • Yes sir, you'll need to make a customized drop down menu made of some other tags like `
    ` or better yet a `
    ` tag.
     – zer00ne Feb 24 '19 at 04:08

1 Answers1

0
var elements = document.getElementsByTagName('option');

for (var i = 0; i < elements.length; i++){
    var btn = document.createElement('input');
    btn.type = 'button';
    btn.value= elements[i].value;
    console.log(btn);
    document.getElementById('input-sort').appendChild(btn);
}
yekanchi
  • 813
  • 1
  • 12
  • 30
  • does it change selection list to buttons? – Muhammed Feb 24 '19 at 03:55
  • i think you can find your answer here https://stackoverflow.com/questions/7373058/changing-the-selected-option-of-an-html-select-element – yekanchi Feb 24 '19 at 03:56
  • I read that before posting but that answer not helping me my content `{{ sorts.href }}` keep changes when clicking other checkboxes. – Muhammed Feb 24 '19 at 04:00