XF 2.2 Anyone can help me edit this HTML code to add links

[Tamasita]

How I can edit this "prefix" HTML code, to create in its style a link dropdown menu?

I can not make the texts into clickable links.

Anyone can help me edit this HTML code?

<select class=" input" title="Prefixes" name="prefix_id">
<option selected="selected" value="0">(Any)</option>
<optgroup label="Link Selector">
<option value="155" data-prefix-class="label label--lightGreen">Cliclable Link 1</option>
<option value="156" data-prefix-class="label label--lightGreen">Cliclable Link 2</option>
<option value="157" data-prefix-class="label label--lightGreen">Cliclable Link 3</option>
<option value="158" data-prefix-class="label label--lightGreen">Cliclable Link 4</option>
<option value="153" data-prefix-class="label label--lightGreen">Cliclable Link 5</option>
</optgroup>
</select>

 

[DarkGizmo]

You could try this:

<select class=" input" title="Prefixes" name="prefix_id">
<option selected="selected" value="0">(Any)</option>
<optgroup label="Link Selector">
<option value="155" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 1</a></option>
<option value="156" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 2</a></option>
<option value="157" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 3</a></option>
<option value="158" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 4</a></option>
<option value="153" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 5</a></option>
</optgroup>
</select>

Where # is, is where you'd put the actual URL/anchor to where you want the link to go.

 

[Tamasita]

You could try this:

<select class=" input" title="Prefixes" name="prefix_id">
<option selected="selected" value="0">(Any)</option>
<optgroup label="Link Selector">
<option value="155" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 1</a></option>
<option value="156" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 2</a></option>
<option value="157" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 3</a></option>
<option value="158" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 4</a></option>
<option value="153" data-prefix-class="label label--lightGreen"><a href="#">Cliclable Link 5</a></option>
</optgroup>
</select>

Where # is, is where you'd put the actual URL/anchor to where you want the link to go.

Thank you, but unfortunately not working. It's no interaction when I click it. I found a code online, and now I try to mix it with that. I think I missing defining the action like in this code:

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

 

[DarkGizmo]

Thank you, but unfortunately not working. It's no interaction when I click it. I found a code online, and now I try to mix it with that. I think I missing defining the action like in this code:

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Sorry, try this:

<form>
<select name="list" id="list" accesskey="target">
    <option value='none' selected>Choose a theme</option>
    <option value="index.html">Theme 1</option>
    <option value="theme2.html">Theme 2</option>
    <option value="theme3.html">Theme 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>

Put this into your header's <head></head> tags:

<script type="text/javascript">
    function goToNewPage()
    {
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
        }
    }
</script>

 

[Tamasita]

Wow. Thank you so much this is working great!