两个选择列表的重复操作

我需要复制两个选择列表的操作,例如,如果您为第一个选择列表选择一个值,则另一个应该自动更新。


这是我的代码:


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

}


红颜莎娜
浏览 81回答 1
1回答

翻翻过去那场雪

如果你想用位置更新它那么你应该这样做function changeDropdown(e){&nbsp; var value = $("#descripcion option:selected").index();&nbsp; $("#descripcionx").prop('selectedIndex', value);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-10">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-inline md-form mr-auto">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" id="descripcion" name="descripcion" onchange = "changeDropdown(this);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Texto 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Texto 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Texto 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-10">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-inline md-form mr-auto">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" id="descripcionx" name="descripcionx" onchange="changeDropdown(this);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20">Texto 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="30">Texto 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="40">Texto 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>但在这种情况下,两个下拉option顺序必须相同。最好在两个下拉列表中使用相同的value属性。然后你可以简单地改变它function changeDropdown(e){&nbsp; var value = $("#descripcion option:selected").val();&nbsp; $("#descripcionx").val(value);}
打开App,查看更多内容
随时随地看视频慕课网APP