通過名稱獲取選擇框並通過相同名稱設置另一個選擇框？

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

如果創建2個彼此完全對應的數組：

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找出第二個數組中相應的縮寫；
• 使用返回的縮寫在第二個選項列表中找到正確的選項