Develop Reference

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/

Custom html validation for select

I have a select element like this:
<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
and I want user to select a option e.g. opt2, opt3... but opt1,
how to to use html 5 validation to valid the select?

I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:
<form>
<label >Choose an option:</label>
<select name="select" required>
<option value="" disabled selected>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
<input type="submit">
</form>
The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.

You can do something like the following:
<select name="select">
<option value="opt1" selected disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3, but once they do that then they cannot selecte opt1, hope this is the behaviour you're looking for.

Try Using:
<select name="select" required>
<option value="opt1" selected="selected" disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>

How to make select drop down list read only and unchangeable

Here is a link of js fiddle
[https://jsfiddle.net/7Lcf533c/1/][1]
i make select dropdown read only but when i click on it it shows me the drop down option which should not show and it is changeable
Can you suggest a solution and update that in jsfiddle

You can do it like this:
$("#id_messageKindId option").prop('disabled',true);

use disabled attribute
<div class="col-sm-8"><select class="form-control" id="id_messageKindId" name="messageKindId" disabled="disabled" required="required" readonly="">
<option value="1">Appointment Reminder</option>
<option value="2">Eyeware or Contact Arrival</option>
<option value="3">Appt Delay / Move Up</option>
<option value="4">Appt Cancellation</option>
<option value="5">Recall</option>
<option value="7">After Appointment</option>
<option value="10" selected="selected">Pre Appointment</option>
<option value="11">Lab Results</option>
<option value="12">Collection Message</option>
<option value="13">Custom Message</option>
</select></div>
fiddle at https://jsfiddle.net/7Lcf533c/5/

HTML: Form POST select return option text

I have next HTML:
<select name="fb_query[1][type]">
<option val="1">Page posts</option>
<option val="2">Page feeds</option>
<option val="3">Page fotos</option>
<option val="4">User posts</option>
<option val="5">User fotos</option>
</select>
Select generated by javascript but maybe its not a problem.
When I submit form, in the post metadata $_POST['fb_query'][1]['type'] I get "Page fotos" not "3" ..
Maybe someone know where is problem ?

The correct html attribute is value not val:
<select name="fb_query[1][type]">
<option value="1">Page posts</option>
<option value="2">Page feeds</option>
<option value="3">Page fotos</option>
<option value="4">User posts</option>
<option value="5">User fotos</option>
</select>

Select box not allowing a placeholder with ng-model

I have a dropdown select box, As soon as i put in ng-model= it stops showing a placeholder,
Any ideas why this is happening? I have tried placed ng-selected, Selected and default on the choose option.
Here is the code
<select id="fontChooser" ng-model="eventData.font" placeholder="Test">
<option value="0" ng-selected="selected">Choose...</option>
<option value="Times">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="ComicSans">Comic Sans</option>
</select>
I'm wanting the choose option to be the placeholder of the select box

Use:
<option value="">Choose...</option> <!-- leave the value empty -->
as the placeholder
Plunker

Try using an ng-init
<select id="fontChooser" ng-model="eventData.font" ng-init="eventData.font='Choose'" >
<option value="Times">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="ComicSans">Comic Sans</option>