Imagine this as a demonstration page you've created with a select option labeled as "dropdown"
HTML
<html>
<body>
<p>What are you searching for? I am searching for
<select id = "dropdown" >
<option value="zero" selected>Select an Option</option>
<option value = "one">Duckduckgo</option>
<option value = "two">Qwant</option>
<option value = "three">Jamun Search</option>
</select>
</p>
</body>
//JavaScript
function displayDropdown(){
var paraTag = document.getElementById('list');
paraTag.style.display = "none";
var chosen = document.getElementById('dropdown');
chosen.style.display = "block";
}
function goToPage(){
var selected = document.getElementById('dropdown');
var selection = selected.options[selected.selectedIndex].value;
if(selection == "one"){
window.location.href = "http://www.duckduckgo.com";
}
else if(selection == "two"){
window.location.href = "http://www.qwant.com";
}
else if(selection == "three"){
window.location.href = "http://www.jamunsearch.rf.gd";
}
else {
alert("Please choose an option to proceed!")
}
}
/* CSS */
.dropdown {
display: none;
}
<!--HTML-->
<html>
<body>
<p>What are you in search of? I am searching for</p> <p id="list" onclick="displayDropdown()">__________</p>
<select id = "dropdown" class="dropdown" onchange="goToPage()">
<option value = "zero" selected>Choose One</option>
<option value = "one">Duckduckgo</option>
<option value = "two">Qwant</option>
<option value = "three">Jamun Search</option>
</select>
</p>
</body>
</html>
Once the user taps on '_____', it will disappear and reveal the select dropdown to be chosen.
The function goToPage() triggers when a choice is made by the user, hiding the drop-down list (display:hidden). The script obtains the value of the picked option which can be zero, one, two, or three. It then verifies against the predefined values.
window.location.href("http://www.example.com")
will forward the user to
Example.com. You may modify that URL to match your WordPress URLs.
If no selection is made, the page will prompt the user to make a selection before proceeding.
If you prefer to verify the condition with the select name, check out this article Obtain the Select Option Value