By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

How to insert drop down list [use link] ** SOLVED **

H

Hugo Digital

New Member
** SOLVED **
Hi,

I searched for a native Elementor feature to insert a "select" list with links to internal pages of the site: I couldn't find it.
So I used the "HTML" feature of Elementor (not the HTML feature of WP).

Here is the code :

HTML:
<form class="select" name="destinations">
    <select name="destination-select">
        <option selected='selected'>-- Select your destination --</option>
    <option value='http://website/link-1'>Australia</option>
    <option value='http://website/link-2'>French polynesia</option>
    <option value='http://website/link-3'>New Zeland</option>
    </select>
    <div class="select_arrow">
    </div>
<input type="button" class="destinations-button" onclick="location=document.destinations.destination-select.options[document.destinations.destination-select.selectedIndex].value" value="Go to destination !">
</form>
But the button does not work.

Could you please help me.

Regards,

Hugo
 
elementor official
Last edited:
sms-design

sms-design

Member
Your over think the problem, in wp admin > appearances > menu = create a menu called Destinations

Now add your pages/post called country a | country b | country c

As the site grows you only need to add your new page to the Destinations Menu

In Elementor Pro you can use the Nav Menu widget to call the Destinations Menu on your pages

If you are using Elementor Free you could use https://wordpress.org/plugins/menu-shortcode/
 
elementor official
H

Hugo Digital

New Member
Hi,

I use Elementor Pro. I already test Menu function but i need a select menu with chevron (not the hamburger icon).
Moreover, when you open the hamburger menu, it automatically resizes the column to which it is attached.

For my request I don't think this is the solution, what do you think?
 
elementor official
H

Hugo Digital

New Member
I would rather know (understand) why my code doesn't work? ;)
 
elementor official
Koni Kodes

Koni Kodes

Member
You seem to be doing two different things.
Creating a select list with options and then having a button work on those options.
But you still need to link the options to the button. And you are not using JavaScript or jQuery to make that happen..

You can create a list and link from there, just like a dropdown menu without the Select key. It would look something like this in HTML:
<div id="destination-select">
<p>-- Select your destination --</p>
<a href='http://website/link-1'>Australia</a><br/>
<a href='http://website/link-2'>French Polynesia</a><br/>
<a href='http://website/link-3'>New Zeland</a><br/>
</div>
Note that the default text for an <a> tag is blue with an underline. You can add css to say
#destination-select a {
text-decoration: none;
}

Or, you would need either JavaScript or jQuery to say something about how the button destination is equal to the value of the chosen destination. I would probably place that in a for-loop.
 
elementor official
sms-design

sms-design

Member
Try using this code

<select id="menu">
<option selected="selected">Select One</option>
<option value="https://www.bbc.co.uk">BBC News</option>
<option value="https://www.lonelyplanet.com/scotland/glasgow">Glasgow</option>
<option value="https://www.nycgo.com/">New York</option>
</select>
<input type="button" id="goBtn" value="GO!">

<script type="text/javascript">
var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");

goBtn.onclick = function() {
window.location = menu.value;
}
</script>
 
elementor official
H

Hugo Digital

New Member
Thank you too much...
I found my solution without button and moreover 1 clic less ;)

Code:
    <select class="select" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
@sms-design : your solution was good too ;)

Regards,
 
elementor official
H

Hugo Digital

New Member
Thank you @Koni !
I'm newbie in this forum... How to set as resolve a topic please ?
 
elementor official
Koni Kodes

Koni Kodes

Member
Hi @Hugo Digital Welcome to the forum.

If you go to your original post, you should see "Edit" at the bottom of the post.

When you click on that, you should be able to type "** SOLVED **" at the top of your post.
 
elementor official
H

Hugo Digital

New Member
Hi @Hugo Digital Welcome to the forum.

If you go to your original post, you should see "Edit" at the bottom of the post.

When you click on that, you should be able to type "** SOLVED **" at the top of your post.

Sorry,

But with my man's eyes, it is so difficult to see the "edit" button at the bottom...
May be one day i will find it ;)
 
elementor official
Koni Kodes

Koni Kodes

Member
But ** SOLVED ** is in the original post.

Glad you solved it.:)
 
elementor official
elementor official
Top