Develop Reference

Search Filter Logic on Select Tag in HTML

This is how my screen looks like.
I want to use the Search text field to search across the list. I am unable to develop any logic for the same as the list is in the form of a select. Please let me know.
<c:forEach items="${listUnallocatedpermission}" var="permisssion">
<option value="${permisssion.perm_id}"> ${permisssion.name}</option>
</c:forEach>
</select>

You should create an even listener for the search box and get the typed value. For every key stroke, you will get the value and filter all names in your permission array that includes the typed value and then refresh the list with the filtered values

php drop downlist with 2 values the 2nd value post to hidden field

I've got a regular drop downlist for selecting the countries name as text and countries_id as value.
Example:
<option value="1">Afghanistan</option>
Now I need an hidden form field with the ISO2 code for the country.
Example:
<input type="hidden" name="iso2" id="inputIso2" class="form-control">
And when the country is changed by the drop downlist, the hidden field should also change.
I've added the ISO2 to the option like this:
<option value="1" data-iso2="AF">Afghanistan</option>
But how do I pass it to the hidden field?
Or is there a better way of doing this?
The ISO2 field is being used by another script in the form, so it should work pre post.

This isn't really a PHP problem so much as it is a javascript problem. You need to put an event listener on your select element and when it changes, grab data-iso2 and apply the value to the hidden field.
Using jQuery, you'd do this:
$("#country").change(function(){
var iso2 = $(this).find(':selected').data('iso2');
$("#inputIso2").val(iso2);
});

Applying form validation of select menu similar to html5 required attribute of <input>

I'm trying to make everything in my form required, including the select menus. w3schools says that no major browsers support the required attribute on <select> tags..
http://www.w3schools.com/tags/att_select_required.asp
Is there really no way to provide client side validation on select menus the same way as input text fields? I have a working plunkr here, where if you click check with everything blank, the warning appears under the the first input, even though there is a select menu above it.
if it were working the "this field is required" message would appear under the select menu since it is the first invalid form item. Additionally if you fill out all input fields no message appears anywhere. The code is in angular and spans 5 files, so view it on the plunkr .
If you know any way to apply the same validation to select menus, or have confirmation this is impossible, I'd greatly appreciate it.

W3schools is incorrect as usual. Useful references like MDN on select tell that required is supported by modern versions of all major browsers; the main problem with support is lack of support in IE 9 and older.
However, you need to note the definition of the attribute: it means that the control satisfies the constraint if and only if its value is nonempty. Since the first option is selected by default (unless you make another option initially selected using the selected attribute), you need to make its value empty. Example:
:invalid { outline: solid red }
<form>
<select name=fruit required>
<option value="">Please select a fruit
<option>apple
<option>orange
</select>
<input type=submit value=Submit>
</form>
If you need to cover IE 9 and older, too, just add simple JavaScript code that checks that value property of the select element is not empty when the form is to be submitted (or whenever you are checking the form data in the browser).

The built-in HTML 5 alerts aren't coming up because technically you already have an option selected. Angular's select directive creates and defaults to a blank option if the ng-model attribute in the element doesn't refer to a specific options value.
Inspect your select element and you'll see
<option value="?" selected="selected"></option>
You could have your ng-model attribute refer to a valid options value and then hide the automatically generated blank value option, but then, you would always have a value pre-selected and your animation effects for select elements would be lost. See example here.
Your only other option is to create your own validation and have a div underneath each select element that either shows or hides based on if a valid value is selected.

Change the value of a select box (html) from javascript

I have a select box in my webpage to fill a formulary. I want to recover the info filled by the user other times in it exists.
All my fields are properly filled except select box.
This is my code in html related to selectbox:
<br>Gender: <select id="gender">
<option value="man">Man</option>
<option value="woman">Woman</option><br>
It is a simple webpage just with a formulary in it. There is not anything else. I am just trying it.
With this line:
$(document).on("pageinit", '#settings', function() {
document.forms[0].gender.value = userGender;
...
I am modifiying the value of that box for reading it in other parts of my webpage or send it to the database. And the value keept is the correct one, but, the displayed value is not propertly shown.
Do you know which property do I have to modify to change the displayed value?

According to your question the asnwer developerCK has provided is correct.
Anyway look this demo and give a feed back if any thing we missed.
$('#gender').val('woman');

If you are using jQuery, then you can change or select the value of select box through jQuery!
It is very easy. Use selector and val.
$('#gender').val(userGender);

How can I progressively enhance country and state select fields?

I haven't seen any website do this properly...
If I have two select fields, country and state, then I would code it like so:
<select name="country">
<option>USA</option>
<option>France</option>
</select>
<select name="state">
<option></option>
</select>
I would then populate the state field using AJAX depending on the selection of the country.
However, this is the progressively enhanced state. How would it be done without the use of Javascript? and how should it be enhanced (if the previous example isn't the best way)?

My recommendation is to have a submit button next / below the country drop down. When submitted the server will populate the state for the selected country and sends the response back.
Now, in your javascript on page load hide this button and attach on change handler to the country dropdown and make an AJAX call which will return the states.
So, if the javascript is disabled the button would perform the retrieval of the states. If enabled AJAX call would do the same.

One solution could be to join the two selects together. Like
<select name="countryAndState">
<option>USA - Alabama</option>
<option>USA - Alaska</option>
...
<option>France - Alsace</option>
<option>France - Aquitaine</option>
</select>
or better
<select name="countryAndState">
<optgroup label="USA">
<option>Alabama</option>
...
</optgroup>
<optgroup label="France">
<option>Alsace</option>
...
</optgroup>
</select>
Of course, at least in the second form you will have to ensure that the option values are unique. The optgroup element is the recommended way to group select options hierarchical in a tree order. That means, your enhancing javascript will also be able to extract the tree structure from DOM.
The other solution would be populating the state field server side, i.e. split your form up in two steps where one first selects the country, then the state. This could be done with a cookie or something to save the selected country; and whenever the submitted value for country differs from the saved value you need to output a new (unselected) state select element.