Дублирующее действие двух списков выбора

Question

Мне нужно продублировать действие двух списков выбора, например, если вы выбираете значение для первого, другой должен автоматически обновляться.

Это мой код:

    <div class="form-group">
        @Html.LabelFor(model => model.descripcion, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="form-inline md-form mr-auto">
                <select class="form-control" id="descripcion" name="descripcion" onchange = "return GetChange(this);">
                    <option>Texto 1</option>
                    <option>Texto 2</option>
                    <option>Texto 3</option>
                </select>
                @Html.ValidationMessageFor(model => model.descripcion)
            </div>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.descripcion, new {onChange = "return GetValue(this);", @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="form-inline md-form mr-auto">
                <select class="form-control" id="descripcionx" name="descripcionx" onchange="return GetValue(this);">
                    <option value="20">Texto 1</option>
                    <option value="30">Texto 2</option>
                    <option value="40">Texto 3</option>
                </select>
                @Html.ValidationMessageFor(model => model.descripcion)
            </div>
        </div>
    </div>

Это моя функция JavaScript:

function GetChange(ctr) { 
    var i = $("#descripcion option:selected").index(); 
    $("#descripcionx").val(i); 
}

Answer 1

Если вы хотите обновить его с позицией, вы должны сделать это

function changeDropdown(e){
  var value = $("#descripcion option:selected").index();
  $("#descripcionx").prop('selectedIndex', value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="form-group">
        <div class="col-md-10">
            <div class="form-inline md-form mr-auto">
                <select class="form-control" id="descripcion" name="descripcion" onchange = "changeDropdown(this);">
                    <option>Texto 1</option>
                    <option>Texto 2</option>
                    <option>Texto 3</option>
                </select>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10">
            <div class="form-inline md-form mr-auto">
                <select class="form-control" id="descripcionx" name="descripcionx" onchange="changeDropdown(this);">
                    <option value="20">Texto 1</option>
                    <option value="30">Texto 2</option>
                    <option value="40">Texto 3</option>
                </select>
            </div>
        </div>
    </div>

Но в этом случае оба ваших выпадающих порядка option должны быть одинаковыми.Лучше использовать один и тот же атрибут value в обоих выпадающих списках.Тогда вы можете изменить это просто с помощью этого

function changeDropdown(e){
  var value = $("#descripcion option:selected").val();
  $("#descripcionx").val(value);
}