Develop Reference

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>

Get Checked Only in <Select multiple>

I am trying to get only the checked names in a list of names. Here is my code model:
<select ng-model="selectTopic" ng-change="changedTopic(selectTopic)" ng-options="option as option for option in topics">>
<option value="" disabled>Select a Subject</option>
</select>
<select ng-model="selectDept" ng-change="changedDepartment(selectDept)" ng-options="option as option for option in department">
<option value="" disabled>Select a Department</option>
</select>
<select ng-model="selectUser" ng-options="option as option for option in users" multiple="multiple">
<option value="" disabled>Select a User</option>
</select>
I want to get the selected topic, department, and users. I am currently using: console.log($scope.topics + $scope.departments + $scope.users) but it returns everything. I just want to return the selected items.
Can anyone help me out?

You have to print the ng-models , not the arrays:
console.log($scope.selectTopic);
console.log($scope.selectDept);
console.log($scope.selectUser);
Hope it helps =)

use one object for the model in your form , then you have all the user input in that one object which makes it simple to send to server or to reset form
$scope.userInput={}
<select ng-model="userInput.selectTopic" ng-change="changedTopic(userInput.selectTopic)" ng-options='...'>
<select ng-model="userInput.selectDept" ng-change="changedDepartment(userInput.selectDept)" ng-options='...'>
to see this working put the following in your view temporarily
<pre>{{userInput|json}}</pre>

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/

How to set the value of multiple dropdown selectors based on the value of another dropdown selector on change?

EDIT: post the question and magically it starts working :/ Maybe because I removed the alert?
So I have a dropdown selector that is supposed to represent the default for a set of dropdown selectors that make up a country list.
Here is one of the many code permutations I tried:
$("#edit-ip-ban-setdefault").change(function () {
var selected = this.selectedIndex
$(".form-type-select").each(function() {
$('.form-select').attr('selectedIndex', selected);
$(".form-select").val(selected).change();
});
});
Here is the relevant HTML for the default dropdown:
<select class="form-select valid" name="ip_ban_setdefault" id="edit-ip-ban-setdefault" selectedindex="1">
<option value="0"></option>
<option value="1"> Read Only </option>
<option selected="selected" value="2"> Complete Ban </option>
</select>
And here is the HTML for one of the many dropdowns I wish to have updated on change:
<div class="form-item form-type-select form-item-ip-ban-AF">
<select class="form-select valid" id="edit-ip-ban-af" name="ip_ban_AF">
<option selected="selected" value="0"></option>
<option value="1">Read Only</option>
<option value="2">Complete Ban</option>
</select>
</div>
I'm using jQuery 1.7, but ideally the solution would work for 1.5 to 1.10.

binding ng-click to option values

Hi I want a particular function to be called when anything is selected from a given dropdown. That function needs as an argument the value of the option selected. So far this is what I have got :
<label class="control-label col-lg-3">Action Type</label>
<div class="col-lg-9">
<select class="form-control" id="type" >
<option value="">Please Select</option>
<option value="SCHEDULE" ng-click="getHtml(/*SCHEDULE*/)">
SCHEDULE
</option>
<option value="HTTP" ng-click="getHtml(/*HTTP*/)" >
HTTP
</option>
<option value="RMQ" ng-click="getHtml(/*RMQ*/)">
RMQ
</option>
<option value="WFE" ng-click="getHtml(/*WFE*/)">
WFE
</option>
</select>
</div>
However this does not seem to be working. Can someone please help?
The method is in the controller as:
$scope.getHtml=function(option){
console.log("sent type is: "+type);
var type=$('#type').val();
//BLAH BLAH...
}

You should use ngChange and ngModel directive on select element.
ngChange: Evaluate the given expression when the user changes the input.
Example
<select class="form-control" id="type" ng-model='type' ng-change="getHtml(type)">
<option value="">Please Select</option>
<option value="SCHEDULE">SCHEDULE</option>
<option value="HTTP">HTTP</option>
<option value="RMQ">RMQ</option>
<option value="WFE">WFE</option>
</select>
DEMO

you need to use ng-change here,
first assign a model to select
ng-model="modelName" the modelName is a scope variable which has the value of select box,
second remove the ng-click="getHtml..) from options.
and using ng-change you can call a controller function with the value of modelName variable when the select box changing its value.
<select class="form-control" id="type" ng-change="getHtml(modelName)" ng-model="modelName">
<option value="">Please Select</option>
<option value="SCHEDULE">
SCHEDULE
</option>
.....
</select>