通过名称获取选择框并通过相同名称设置另一个选择框？

Question

I am building a fairly complex form-- I need to copy some data between one and another and I am using jQuery to do this. The only road block I am running into is setting the state.

I have two drop downs, one us using the full state name as the value and the other is using the state abbreviation as the value. The names are the same-

so on form 1 it looks like

 <option value="Illinois">Illinois</option>

and form 2 it looks like

<option value="IL">Illinois</option>

Each form has its own unique css selector. How can I set the selected value of form 2 to match what is in form 1 using jQuery?

I do not have any control over the forms, just need to manipulate the input. Have tried using a name selector in jQuery, but I'm not having any luck.

Thank you.

Answer 1

You can do something like this

<select id="fullName">
  <option value="Maryland" data-abbr="MD">Maryland</option>
  <option value="Illinois" data-abbr="IL">Illinois</option>
  <option value="Delaware" data-abbr="DE">Delaware</option>
</select>

<select id="abbr">
  <option value="MD">Maryland</option>
  <option value="IL">Illinois</option>
  <option value="DE">Delaware</option>
</select>

And your jQuery

$('body').on('change', '#fullName', function(){
  var abbr = $(this).find('option:selected').data('abbr');
  $('#abbr').val(abbr);
});

Answer 2

Try this

<form id="form1" name="form1">
    <select name="states" onchange="changeselect(this)">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
        <option value="option4">option4</option>
        <option value="option5">option5</option>
    </select>
</form>
<form id="form2" name="form2">
    <select name="states">
        <option value="opt1">option1</option>
        <option value="opt2">option2</option>
        <option value="opt3">option3</option>
        <option value="opt4">option4</option>
        <option value="opt5">option5</option>
    </select>
</form>

    function changeselect(elem)
    {
        var value1 = $(elem).val();
        $('#form2 select option').removeAttr('selected');
        $('#form2').find('select option').each(function(){
            var value2 = $(this).html();
            if(value1 == value2)
            {
                var selected = $(this).attr('value');
                $('#form2 select').val(selected);
            }
        });
    }

Answer 3

If you create 2 arrays which exactly correspond with one another:

var StateNames = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];

var StateAbbreviations = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'];

You can:

• get the value from the first option list;
• find that value's index in the first array; ( hint: use indexOf )
• use the same index to find out what the corresponding abbreviation is in the second array;
• use the returned abbreviation to locate the correct option in the second option list