We Keep Coding

<select> required not working

I'am using this code along with php code for a select and used required class to make it mandatory but it is not working. Does anyone can help me.I have included this html section along with php code.
<select name="category" required="required" class="form-control">
<option value=" ">--Select Category--</option>
<option value="asd">asd</option>
</select>

Try to remove space value in your select category option
<select name="category" required="required" class="form-control">
<option value="">--Select Category--</option>
<option value="asd">asd</option>
</select> code here

First of all, replace
<option value=" ">--Select Category--</option>
with
<option value="">--Select Category--</option>
And then, as w3c says, ... "The required attribute is a boolean attribute. When specified, the element is required."
<select name="category" required class="form-control">
<option value="">--Select Category--</option>
<option value="asd">asd</option>
</select>
Also here you can find same example.
And here you can try the code.
Required is working. The fact is that " " is a value and "" is not.

You have to add required and value attributes
<select required="true" name="unit">
<option disabled selected value="">-- Select One --</option>
<option>Square Feet</option>
<option>Square Yards</option>
<option>Square Meters</option>
<option>Marla</option>
<option>Kanal</option>

In my case, the required attribute on the select element wasn't working because the first option element had the selected attribute added.
selected attribute broke the required attribute
<label for="procedures_of_interest">Procedures Of Interest</label>
<select name="procedures_of_interest" id="procedures_of_interest" required multiple="multiple">
<option value="" selected disabled>Select One or More</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="last">last</option>
</select>
By removing the the selected attribute from the option element, the required and multiple attributes both worked correctly on the select element:
<label for="procedures_of_interest">Procedures Of Interest</label>
<select name="procedures_of_interest" id="procedures_of_interest" required multiple="multiple">
<option value="" disabled>Select One or More</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="last">last</option>
</select>

Try changing the required part to true
So it'll be like required="true", did it work?

You are using required only which is HTML5 validation, may be its not work on all browser. Is you are looking for the proper validation i suggest to with jquery validation.
Validation Document

How to avoid both elements from showing for a split second with ng-hide and ng-show in angular

I have page with two different selects, one shows times that a venue is open in the AM, the other shows times it is open in the PM. I am using an ng-hide and ng-show on the value of a different select to decide which select to show. It works ok, but for a split second it shows both selects on the page, is there anyway to avoid this?
My code:
<div class="col-xs-6">
<label class="control-label">Time</label>
<select class="form-control" ng-model="referral.reservationTime" ng-show="referral.reservationTimeAmOrPm === 'AM'">
<option selected="true" disabled="disabled">Select a Time</option>
<option ng-repeat="hour in amHours">{{hour | militaryToStandardTimeNoAmOrPm}}</option>
</select>
<select class="form-control" ng-model="referral.reservationTime" ng-hide="referral.reservationTimeAmOrPm === 'AM'">
<option selected="true" disabled="disabled">Select a Time</option>
<option ng-repeat="hour in pmHours">{{hour | militaryToStandardTimeNoAmOrPm}}</option>
</select>
</div>
</div>

ng-options clears the model (and visible options) on click, what in tarnation?

So here is my ng-options markup:
<div class="form-group">
<label>Client(s)</label>
<select class="form-control" ng-model="addFirm.firmData.clients" ng-options="clients.instance.id as clients.instance.fName for clients in addFirm.firmData.clients" multiple>
</select>
</div>
Here is the resulting html:
<div class="form-group">
<label>Client(s)</label>
<select class="form-control ng-pristine ng-untouched ng-valid" ng-model="addFirm.firmData.clients" ng-options="clients.instance.id as clients.instance.fName for clients in addFirm.firmData.clients" multiple="" aria-invalid="false">
<option label="Mike" value="string:567f82a9b6daa74f16547564">Mike</option>
<option label="brian" value="string:567f83ac61b2fe4160fb4d4a">brian</option>
<option label="Bill" value="string:567f8df461b2fe4160fb4d4b">Bill</option>
</select>
</div>
Everything looks good but the moment I click on the select menu to pick one, let alone a few, the model is cleared which results in the options being completely wiped out. Any idea what might be happening? I have no rouge click events lying about and the rest of the form, which includes about 15 other standard text fields, functions fine.
The really odd thing is if I do a standard select tag with an ng-repeat, I get none of that hogwash. This works fine:
<select name="clients" id="clients" multiple>
<option ng-repeat="clients in addFirm.firmData.clients" value="{{clients.instance.id}}">{{clients.instance.fName}}</option>
</select>
Any ideas? Thanks in advance!!!

You are binding select to the same model you use to store array items:
<select class="form-control"
ng-model="addFirm.firmData.clients" <!-- <-- addFirm.firmData.clients -->
ng-options="clients.instance.id as clients.instance.fName for clients in addFirm.firmData.clients" multiple>
<!-- and here again --^ -->
</select>
See, addFirm.firmData.clients is both in ngModel and ngOptions? Bind ngModel to something else, for example:
ng-model="addFirm.firmData.clientSelected"

Drag & drop only one item from one select to another

I have 2 select :
<div class="bold margin-bottom-10">
Departments possible
<span style="margin-left: 16%;">Departments selected</span>
</div>
<select name="departmentsSelectable" id="departmentsSelectable" multiple="true">
<option value="1" class="item draggable">Java 1</option>
<option value="2" class="item draggable">Java 2</option>
<option value="3" class="item draggable">Java 3</option>
</select>
<select name="departments" id="departments" class="droppable" multiple="true" style="margin-left: 3%;"></select>
Which is giving the view :
But unfortunately, I don't master JQuery enough to understand these drag/drop events and how to manage them easily :/ I do not know neither, how to put a restriction to have one and only one item.
Here is the fiddly of this problem : http://jsfiddle.net/h90j6xy4/1/
EDIT
Thanks to #saravanan-mp, I plugged http://loudev.com/#demos.
Here is the new fiddly : http://jsfiddle.net/h90j6xy4/3/.
But still, I would like to have a drag & drop effect, and to be able to select only 1 element, and I still don't know how to do it

How can I show a tooltip for each option on a dropdown with JavaScript or Ajax?

How can I show a tooltip for each option on a dropdown with JavaScript or Ajax?
It is easy to show with the code behind, but this tooltip is not as fast as a tooltip created with JavaScript.

You can do something like this with help of javascript by adding this from code behind:
DropDown1.Attributes.Add("onmouseover",
"this.title=this.options[this.selectedIndex].title");
OR
<select name="DropDownList1" id="DropDownList1"
onmouseover="this.title=this.options[this.selectedIndex].title">
<option value="1" title="asd">asd</option>
<option value="2" title="zxc">zxc</option>
<option value="3" title="qwe">qwe</option>
</select>

use this :
<select name="ddlCity" id="ddlCity"
onmouseover="this.title=this.options[this.selectedIndex].title">
<option value="Delhi" title="Delhi">Delhi</option>
<option value="mumbai" title="mumbai">mumbai</option>
<option value="Chennai" title="Chennai">Chennai</option>
<option value="kolkata" title="mumbai">mumbai</option>
</select>