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

[Hugo Digital]

** 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 :

<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

 

[sms-design]

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/

 

[Hugo Digital]

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?

 

[Hugo Digital]

I would rather know (understand) why my code doesn't work?

 

[Koni Kodes]

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.

 

[sms-design]

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>

 

[Koni Kodes]

@sms-design Much better. Thank you!

 

[Hugo Digital]

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

    <select class="select" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">

@sms-design : your solution was good too

Regards,

 

[Koni Kodes]

I am so glad that you made it work!

 

[Hugo Digital]

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

 

[Koni Kodes]

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.

 

[Hugo Digital]

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

 

[Koni Kodes]

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

Glad you solved it.

 

[Hugo Digital]

Yes,

Add it manually... It is so the good practice