Develop Reference

Drop down box to include a link using windows.open

Need some help with this. I have a drop down list which is part of form but i need only one select to be a link using something that will active once clicked. Not sure is window.open is the correct thing to use.
Here is the code i'm using but at present all select are links and i only need 'other' to be it.
<select name="model" onchange="window.open(this.value, '_blank')">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="http://to be a link ">Other..</option>
</select>
Is this possible to do?

You can try something like this. If the value is an URL you can open a new window.
<select name="model" onchange="this.value.includes('http') && window.open(this.value, '_blank')">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="http://to be a link ">Other..</option>
</select>

You can try this
I do not recommend using inline event handlers
NOTE: The script will not actually run here from a stacksnippet due to sandboxing
document.querySelector("[name=model]").addEventListener("change", function() {
const val = this.value;
if (val.startsWith("http")) {
console.log("This will open",val)
window.open(val, "_blank")
}
})
<select name="model">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="https://to be a link ">Other..</option>
</select>

Dropdown options - redirect to custom url depending to selected option

I've simple dropdown with some options.
<label for="server-select">Choose a instance type:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="https://instance1.com">Instance1</option>
<option value="https://instance2.com">Instance2</option>
<option value="https://instance3.com">Instance3</option>
<option value="https://instance4.com">Instance4</option>
</select>
<button>Submit</button>
When I select example Instance3 I need to redirect to this custom url on submit.
Can anyone help me to do?

Try this!
function goToUrl(){
window.location = document.getElementById("server-select").value;
};
<label for="server-select">Choose a instance type:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="https://instance1.com">Instance1</option>
<option value="https://instance2.com">Instance2</option>
<option value="https://instance3.com">Instance3</option>
<option value="https://instance4.com">Instance4</option>
</select>
<button onclick="goToUrl()">Submit</button>
This code won't run properly in the StackOverflow's code snippet. You may have to run it by adding this to your own project.
Thanks and best regards!

$(document).ready(function(){
$('#server-select').change(function(){
window.open(this.value, '_self');
});
});
This will achieve what you are looking for with jQuery, example: https://jsfiddle.net/rz8ty90n/

How to avoid onclick to work again after selecting option in html-select?

I have problem in the following code;
function check(x){
//do staff here
}
<select onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
When i click on the select tag, my function works but after selecting an option, the function works again.
But i want the function to work only when i click on the select tag, not when selecting one of the options tag again.
I searched but couldn't find any solution for this. How can i avoid this to happen?
Thanks in advance.

Use onchange instead of onclick.
https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event
<select onchange="check(this.value)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

Set a flag on first execution and check the flag.
var executed = {};
function check(e) {
var name = e.name;
if (!executed[e.name]) {
executed[e.name] = true;
console.log("executed", e.name);
}
}
<select name="select1" onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select name="select2" onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

If you're using jQuery you can use the one() function as it is documented here
$( "select" ).one('change', function(){
//do staff here
}
<select class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

Let’s check the event.stopPropagation() method.

How should i show select title with css

Hello Guys Please Help me for this I didn't how I show select title. I want to show above When should we call you?.
please check my code Thanks:-
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
Please check online codepen code link:- https://codepen.io/anon/pen/EQBbyG

You can add a <label> in your HTML Markup.
<label for="myfirst">When should we call you?</label>
<select name="myfirst" id="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>

If you use jQuery you can select all the <select> elements with a title attribute, and copy its value into the first <option>.
$("select[title] option:first-child").text(function(i, oldtext) {
if (oldtext.trim() == '') {
return $(this).parent().attr("title");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today">today</option>
<option value="tommorow">tommorow</option>
<option value="sunday" >sunday</option>
</select>
<select name="mytime" title="What time of day?">
<option class="optnoval"></option>
<option value="morning">Morning</option>
<option value="afternoon" >Afternoon</option>
<option value="evening">Evening</option>
</select>

Load page on selection from dropdown form

I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!

Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>​
What you were looking for was 'onchange' instead of 'onsubmit'

Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>

Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>

I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>

Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>