We Keep Coding

How to pragramatically change a dropdownlist to another field's value

I have a dropdownlist with a list of countries (all countries)
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
I have the form in a modal that i want get country value from.
<input id="seachcountry" type="text" class="form-control" name="country">
I have written a JQuery line to get the value from the modal form to the page fields, everything works great but the country select fields are not changing the value.
$("#seachcountry").val($("#modalform").val()).trigger("chang‌e");
thank you for your suggestions!

This will work for you:
Just inject the value of the <input> to <select>.
I have created a snippet for you.
var Tval = $('#seachcountry').val();
$('#Country').val(Tval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
<input id="seachcountry" type="text" class="form-control" name="country" value="France">

Try this.
function country() {
$("#seachcountry").val($(this).val());
}

For changing value in any select you just need send exist value from this select. In your select options have only ids, but not have value attribute. So if you add value equal to id to change value in the your form to "France" need run following:
$("#selectId").val(5)
Instead of 5 you can obtain value from any other field or else.
If you want set your value to input field when changed in select, you need attach listener that will do all work. It will looks like this:
$("#selectId").on("change", function(){
$("#inputFieldId").val($(this).find(":selected").text());
})
This will set displayed value to select, to set real value just write instead $(this).find(":selected").text() this $(this).val()

HTML: Is there a way to allow the user to type in their input but also have a drop down select menu?

For example, I have
<label class="form">Menu</label>
<select id="selection" name="select" required>
<option value="" selected>--Select an Option--</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
...
</select>
This would only give a a drop down menu when the user clicks on the input box with their mouse. But I want to give them the option to be able to type in the input box such as:
If the user types in option1 it would direct them to the "Option 1" drop-down menu, etc. And if the user types in any other words that are not included in the drop-down list it would show "Invalid Input".

Yes there is! A text input with a list attribute:
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Boston">
<option value="Cambridge">
</datalist>
EDIT: for the autocomplete, try Bootstrap Typeahead

Select text that is not in the options using jquery

I have this html code,
<select name="sup" class='form-control' required >
<option value="1">Value 1</option>
</select>
Is it possible to display text to the dropdown that is not in the options using JQuery?
More explanation,
I have only option that value is 1 with name of "Value 1".
I want to display "Value 2" with value of 2.
But if I will click the dropdown arrow, It will display only one option, the "Value 1".
Is it possible?

Maybe this code for a placeholder could help you, it will show as default value in the select, but will not be selectable, and the user will be forced by html validation to select another option (if you use HTML validation). If you don't use HTML (or other) validation, because the option is disabled, it won't be sent with the form even if it has a value.
The "Other" option will trigger a new input to have a custom response.
//Detects the change of value of the select element.
$("select[name='sup']").change(function() {
//Checks if the current value of the elemnent is "other"
if ($(this).val() == "other") {
//If so, the other input is shown
$("input[name='other-input']").show();
} else {
//else, the input is cleaned and hidden
$("input[name='other-input']").val("");
$("input[name='other-input']").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="sup" class='form-control' required>
<option value="" selected disabled>Placeholder Text</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="other">Other</option>
</select>
<input style="display: none; width: 300px;" type="text" name="other-input" placeholder="Type here your custom response">

No. What shows when the drop-down isn't open must be one of the options in the select's options. To do something else, you'd have to start playing with overlaying things on top of the select, with all the cross-browser pain that comes with it.

<s:select> drop down issue when using default option as empty

I am using Map to populate Struts2 tag <s:select > , observed that when there are multiple submission of the form a blank line gets appened at the end of the list.
For instance, if Map has 2 key value pairs it show 3 records and append a blank record in the bottom(not at the top--for default case).
Item 1
Item 2
<-blank->
<s:select id="bankAccountId"
name="accountBean.recordDetails.BankAcct.bankAcctId" label=""
headerKey="" headerValue="" list="accountBean.bankAccountMap"
listKey="key" listValue="value" />
<select name="accountBean.recordDetails.BankAcct.bankAcctId">
<option value=""></option>
<option value="51089">BANK XXXX123</option>
</select>
<select name="accountBean.recordDetails.BankAcct.bankAcctId" id="bankAccountId"> <option value="-1" selected="selected">Default values</option> <option value="77746">Details XXXXXX2246</option> <option value="-1" selected="selected"> </option> <---this default value gets appened in the end... </select>
When i use s:select attribute emptyOption="true" same issue is observed but when emptyOption="false" top element becomes non-empty(which i dont want).
on re-submission
<option value="" selected="selected"> </option> extral option gets appened if prior to resubmission default/empty value was chosen..
Can this be handeled by javascript or jQuery??

As things seem, I think the problem is that you are adding the default value to the map after submission, so in the next rendering of the page, it already contains that item. Usually, you should refill your map in your prepare method, that way the -1 key won't be in the map.

parsley.js select list value of zero - not working

I have a select list on my test form that I am trying to get to work with parsley.js validation.
The parsley validation does work, but only when the default value of the select list is a blank value, except I need to have a value of 0 (zero).
So when the value of zero is selected / displayed in the select list the select list should be red with indicating that there is an error.
How do I get the select list to validate correctly, when I am using a default value of zero?
Here is an example of my select list with the zero value:
<select name="availability_type" id="id_availability_type" data-parsley-id="1601" data-parsley-required="true" data-parsley-required-message="You must enter at least one Detail." class="input-xlarge2 standard_input_style parsley-success">
<option value="0"> Do not display Availability</option>
<option value="1">Immediately</option>
<option value="2">1 week</option>
<option value="3">2 weeks</option>
<option value="4">3 weeks</option>
<option value="5">4 weeks</option>
<option value="6">> 4 weeks</option>
</select>
Here is the code line that works with a blank space as the value:
<option value=" "> Do not display Availability</option>

I finally got this to work using the data-parsley-min="1".
This way the input will not accept the value of zero.
Hope that this helps some one.

To make it work properly you needed to do the following
<!--Do this-->
<select id="select-id" required="" data-parsley-required-message="You must select at least one option.">
<option value=""> Do not display Availability</option>
.
.
</select>
Doing it witht data-parsley-min="1". would make your required message say something stupid like min value has to be at least 1 (even if you override it with the required message attribute)
Hope this helps any other person...