How to retrieve the dropdown value in edit form with jquery?

How to retrieve the dropdown value in edit form with jquery? - javascript

So,i have a form with a country dropdown in it so when i am adding the counrty it is inserting into database
but when i click on edit i am fetching the values of all other fields except the dropdown it is not showing the country which was added previously in the dropdown
can some one help ??
i am trying to do this with jquery ,
i am using semantic for frontend with jsp and servlet for the backend
i am new to this please guide and edits in question to improve it is appreciated
i will try to add what i have tried so far.
<div class="three fields">
<div class="field">
<label>Country</label>
<select class="country" id = "form_country" class= "form-control" name="country" >
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
i tried using these
$('.form_country a').click(function () {
$('button').text($(this).text());
});
$('input[name="country"]').click(function (){
if ($(this).value()== "<c:out value='${editUser.country}'/>")
$('button').text($(this).text());
});
$('.country ').click(function(e){
$('.button').text(this.innerHTML);
});
function answers() {
var answer=document.getElementById("form_coutry");
if(answer[answer.selectedIndex].value == "India") {
alert("That's correct!");
}
}
$('.country ').click(function () {
$('button[data-toggle="dropdown"]').text($(this).text());
});
var NewOprionValue = "Demo"
var RemoveSelected = $("#form_country")[0].innerHTML.replace('selected', '');
var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
$('#form_country').html(ChangeSelected);

try $("#form_country).val(); to retrieve value of dropdown field

Related

How to Detect Clicked Event Handler on Select2 Element in Jquery?

I tried to detect if the clicked element is select2 and perform additional action as required not just opening dropdown list. But it is not successful as I clicked on select2 element nothing happened.
$(document).ready(function() {
$('select').select2();
$('body').on('click', function(e) {
if ($(this).data('select2')) {
console.log('select2 element was just clicked');
} else {
console.log('you are not clicking on select2');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" />
<select style="width:300px" id="select">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
I don't know why select2 does not receive clicked event. Is there any workaround solution archive this because I need to do more action when select2 was clicked? Thanks so much.

How about something like this?
here's another example: https://jsfiddle.net/f8q2by55/ http://jsfiddle.net/6jaodjzq/
as stated in this answer: Attach click-event to element in .select2-result
Because Select2 lib prevents any click events on popover list you can't bind events to .info directly. But you can redefine onSelect method and place there any code you want.
$(document).ready(function() {
let selector = $('#select').select2()
selector.onSelect = (function(fn) {
return function(data, options) {
console.log('selected');
}
})(selector.onSelect);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" />
<select style="width:300px" id="select">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>

How can I show/hide contact information based on U.S. State selection?

At my company, certain representatives service a variety of states. I'm trying to create a dropdown that will show/hide a their contact information based on the U.S. State that a user selects. I have tried a variety of ways and it works if I use 3 options, but it doesn't work when I try to add all 50 states.
Is there a problem with my code? Is there a better way to accomplish this?
Thanks in advance.
$('#purpose').on('change', function() {
if ( this.value == 'blank')
{
$("#blank").show();
}
else
{
$("#blank").hide();
}
if ( this.value == 'jy')
{
$("#jess").show();
}
else
{
$("#jess").hide();
}
if ( this.value == 'jp')
{
$("#justin").show();
}
else
{
$("#justin").hide();
}
if ( this.value == 'rs')
{
$("#rob").show();
}
else
{
$("#rob").hide();
}
if ( this.value == 'rys')
{
$("#ryan").show();
}
else
{
$("#ryan").hide();
}
if ( this.value == 'ss')
{
$("#ssco").show();
}
else
{
$("#ssco").hide();
}
});
});
<div>
<select id='purpose'>
<option value="blank">--</option>
<option value="rys">Alabama</option>
<option value="ss">Alaska</option>
<option value="jy">Arizona</option>
<option value="rys">Arkansas</option>
<option value="jy">California</option>
<option value="ss">Colorado</option>
<option value="jp">Connecticut</option>
<option value="jp">Delaware</option>
<option value="rys">Florida</option>
<option value="rys">Georgia</option>
<option value="ss">Hawaii</option>
<option value="jy">Idaho</option>
<option value="rs">Illinois</option>
<option value="rs">Indiana</option>
<option value="rs">Iowa</option>
<option value="ss">Kansas</option>
<option value="jp">Kentucky</option>
<option value="rys">Louisiana</option>
<option value="jp">Maine</option>
<option value="jp">Maryland</option>
<option value="jp">Massachusetts</option>
<option value="rs">Michigan</option>
<option value="rs">Minnesota</option>
<option value="rys">Mississippi</option>
<option value="rs">Missouri</option>
<option value="jy">Montana</option>
<option value="ss">Nebraska</option>
<option value="jy">Nevada</option>
<option value="jp">New Hampshire</option>
<option value="jp">New Jersey</option>
<option value="ss">New Mexico</option>
<option value="jp">New York</option>
<option value="rys">North Carolina</option>
<option value="ss">North Dakota</option>
<option value="rs">Ohio</option>
<option value="ss">Oklahoma</option>
<option value="jy">Oregon</option>
<option value="jp">Pennsylvania</option>
<option value="jp">Rhode Island</option>
<option value="rys">South Carolina</option>
<option value="ss">South Dakota</option>
<option value="rys">Tennessee</option>
<option value="ss">Texas</option>
<option value="jy">Utah</option>
<option value="jp">Vermont</option>
<option value="rys">Virginia</option>
<option value="jy">Washington</option>
<option value="jp">West Virginia</option>
<option value="rs">Wisconsin</option>
<option value="jy">Wyoming</option>
</select>
<div style='display:none;' id='blank'>
Select Your State
</div>
<div style='display:none;' id='jess'> NAME 1 <br>
PHONE <br>
EMAIL
</div>
<div style='display:none;' id='justin'> NAME 2 <br>
PHONE <br>
EMAIL
</div>
<div style='display:none;' id='rob'> NAME 3 <br>
PHONE<br>
EMAIL
</div>
<div style='display:none;' id='ryan'> NAME 4 <br>
PHONE <br>
EMAIL
</div>
<div style='display:none;' id='ssco'> Please contact your local sales representative.
</div>
</div>

So, the way you are doing this isn't really good for a number of reasons. It's very inflexible and requires that you change both your HTML and Javascript whenever your staff assignments change.
Here's how I approached this. I have an array-like object with staff (like you might retrieve from a database), and the staff have contact info and a list of states they are associated with. When the user chooses a state, we look at each "rep" and see if they service that state and add them to the displayed list if so. If you need to change the assignments around, you just need to edit that one object.
var reps = {
Justin: {
states: ["AL", "AR"],
contact: { name: "Justin", phone: "555-123-4567" }
},
Jess: {
states: ["AR", "MS", "LA"],
contact: { name: "Jess", phone: "555-234-5678" }
},
Rob: {
states: ["NC", "SC"],
contact: { name: "Rob", phone: "555-345-6789" }
}
};
$("#state").on("change", function() {
$("#repList").hide();
$("#repList").html("");
var selectedState = $(this).val();
if (!selectedState) {
$("#reps").fadeOut();
return;
}
$("#reps").fadeIn();
var noReps = true;
Object.keys(reps).forEach(function(repKey) {
var rep = reps[repKey];
if (rep.states.includes(selectedState)) {
noReps = false;
$("#repList").append(
"<li>" + rep.contact.name + " - " + rep.contact.phone + "</li>"
);
}
});
if (noReps) {
$("#noReps").show();
} else {
$("#noReps").hide();
}
$("#repList").fadeIn();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="container">
<h1>Choose your state</h1>
<select id="state" class="form-control">
<option></option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<br>
<div>
<div style="display:none" id="reps">
<h2>State Reps</h2>
<hr>
<h3 id="noReps" style="display:none">
Sorry there are no reps for your state
</h3>
<ul id="repList"></ul>
</div>
</div>
</div>
codepen: https://codepen.io/imjosh/pen/wdmyKv?editors=1010

$('#purpose').on('change', function(){
$(".somemainclass").hide();
$("#"+this.value).show();
});
Why not simply assign the input values to the element ids?
<div id="jy" class="somemainclass"> </div>

How to get select2 to match

I'm trying to re-create the most basic "states" select2 example, but it does not match beyond the first letter - just like a normal select element. It does seem to be loading select2, for example, it displays the selected value to the right of the select element. However, when I try to type a state, it only seems to match the first character. I.e., If I type "t" it will match "Texas", but typing "dak" will match "Delaware" rather than "North Dakota".
I've create a gist of my complete html page. I copied the select element directly from the example page, so there's not a whole lot to it.
In a nutshell, I create a select element with the class js-example-basic-single, and then I call select2() on that element.
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
Edit: On JS Bin

Updated jsBin.
Check the simple working snippet below based on you gist code, and make sure you're adding the CSS link include :
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
Hope this helps.
$(document).ready(function() {
$(".js-example-basic-single").select2({width:'100%'});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="js-example-basic-single js-states form-control">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>

Make Semantic UI search selection drop down scroll to selected item on click?

I am working with the Semantic UI searchable dropdown, which if you're not familiar with it, it can be found here: http://semantic-ui.com/modules/dropdown.html#search-selection.
How would I make it so that once an item is selected in the dropdown, that when you click out and click back in, it would show the currently selected item at the top of the list? So scroll to the selected/active item?

What version of Semantic UI you're using? 'Cause the default behavior of Semantic UI search selection dropdown is just fine.
$('.ui.search.dropdown').dropdown();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<select class="ui search dropdown">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>

Limit character strings in html input box to only state abbreviations

Hello!
I am coding a new HTML form that will collect upon many more items a state abbreviation (i.e. "ks"). Right now I have the -input field- limited so it only allows 2 characters. That doesn't keep visitors from entering something random into the field like "SS".
I am wanting a code that allows me to limit what can be placed in that field to only USA's official state abbreviations.
I am using HTML, CSS, and Javascript so far in my website. Thank you for all your help and ideas!!

Update. Added all states, uppercase handling and jsfiddle link.
Here is a pure javascript implementation, should give you an idea of what you need to do:
<script>
function validateState(el) {
//put all states in this array.
var states = ["AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE",
"FL","GA","GU","HI","IA",
"ID","IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT",
"NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","PR","PW","RI",
"SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY"];
for(var i=0;i< states.length;i++) {
if(el.value.toUpperCase() == states[i]) {
return true;
}
}
//clear element if it doesn't match a state
el.value = ""; //you could maybe do something else here.
return false;
}
</script>
<input class="up" type="text" maxlength="2" onchange="validateState(this);"/>
See it working live here : http://jsfiddle.net/k7QQs/

You could use a <select> html element.
<select>
<option value="MA">MA<option>
....
</select>

I think this would help.
It has:
mustMatch:true,

You can do it without a script:
<select name="state">
<option value="" selected>Please Select</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorada</option>
<option value="CT">Conneticut</option>
<option value="DC">District of Colombia</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="FM">Federated States</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VI">Virgin Islands</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
</select>
That method is easier on your users than expecting them to know a State abbreviation.
Or-
function validState(state){
return state.toUpperCase() in{
AL:1, AK:1, AZ:1,
AR:1, CA:1, CO:1, CT:1,
DE:1, DC:1, FL:1, GA:1,
HI:1, ID:1, IL:1, IN:1, IA:1,
KS:1, KY:1, LA:1, ME:1, MD:1,
MA:1, MI:1,
MN:1, MS:1, MO:1, MT:1, NE:1,
NV:1, NH:1, NJ:1, NM:1,
NY:1, NC:1, ND:1,
OH:1, OK:1, OR:1, PA:1,
RI:1, SC:1, SD:1, TN:1, TX:1,
UT:1, VT:1, VA:1, WA:1,
WV:1, WI:1, WY:1
}
}

We Keep Coding

JavaScript is the programming language of the Web.

How to retrieve the dropdown value in edit form with jquery? - javascript

try $("#form_country).val(); to retrieve value of dropdown field

Related

How to Detect Clicked Event Handler on Select2 Element in Jquery?

How can I show/hide contact information based on U.S. State selection?

How to get select2 to match

Make Semantic UI search selection drop down scroll to selected item on click?

Limit character strings in html input box to only state abbreviations

Categories

Resources