Question

我正在构建一个相当复杂的表单 - 我需要在一个和另一个之间复制一些数据，我使用jQuery来执行此操作。我遇到的唯一障碍是设置状态。

我有两个下拉菜单，一个使用完整的州名作为值，另一个使用州缩写作为值。名字是相同的 -

所以在表单1上看起来像

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

和表单2看起来像

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

每个表单都有自己独特的css选择器。如何使用jQuery将表单2的选定值设置为匹配表单1中的值？

我对表格没有任何控制权，只需要操纵输入。尝试在jQuery中使用名称选择器，但我没有运气。

谢谢。

Answer 1

你可以做这样的事情

<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>

和你的jQuery

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

Answer 2

试试这个

<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

如果您创建两个完全相互对应的数组：

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'];

你可以：

从第一个选项列表中获取value;
在第一个数组中找到值index; （提示：使用 indexOf）
使用相同的index来查找第二个数组中相应缩写的内容;
使用返回的缩写在第二个选项列表中找到正确的选项

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

3 个答案: