使用 jquery 在下拉列表中显示元素

Display elements in dropdown with jquery

本文关键字：显示 元素 下拉列表 jquery 使用      更新时间：2023-09-26

美好的一天社区，

我有一个 ASP.NET 的MVC4项目，在编辑页面上我使用jquery脚本。但是我在页面上显示元素时遇到问题。

这是我的下拉列表在更改前的 HTML 标记：

<select id="ProgramId" name="ProgramId"><option value=""></option>
    <option value="1">testrtu1</option>
    <option value="2">testrtu2</option>
    <option value="3">testtsi</option>
    <option selected="selected" value="4">testrtu3</option>
</select>

这是在jquery更改之后

<select id="ProgramId" name="ProgramId"><option value=""></option>
    <option value="1">testrtu1</option>
    <option value="2">testrtu2</option>
    <option selected="selected" value="4">testrtu3</option>
</select>

但它在页面上显示的不是选定的元素testrtu3，始终显示第一个元素。当我单击保存按钮保存我的第一个值时。

这是我的jQuery函数：

$(document).ready(function () {
    var values = [];
    $(".checkboxUniversities:checked").each(function () {
        values.push($(this).val());
    });
    $.getJSON('/Administrator/ProgramList/' + values, function (data) {
        alert('Return json result new information');
        var items = '<option disabled>Select a Program</option>';
        $.each(data, function (i, program) {
            items += "<option value='" + program.Value + "'>" + program.Text + "</option>";
        });
        $('#ProgramId').html(items);
    });
    //var selectedElement = $("#ProgramId").find(":selected").text();
});

我想我需要在 jquery 中创建dropdown时或创建后以某种方式添加选定的值，但我不知道如何。有人可以帮助我吗？

在将选项附加到下拉列表中之前，您必须将selected index或text保存在变量中并进一步使用它。

示例代码： 

<select id="ProgramId" name="ProgramId"><option value=""></option>
    <option value="1">testrtu1</option>
    <option value="2">testrtu2</option>
    <option selected="selected" value="4">testrtu3</option>
</select>
<input id="click" type="button" value="click me"/>
$(document).ready(function(){
    var option = '<option value="1">testrtu1</option><option value="2">testrtu2</option><option value="3">testtsi</option><option  value="4">testrtu3</option>';
    $("input#click").click(function(){
        var selInx = $("select[name='ProgramId'] option:selected").index();
    $('#ProgramId').html(option);
        $('select#ProgramId').prop('selectedIndex', selInx);
    });
});

演示小提琴

注意：由于我们无法连接到您的后端代码以获取代码本身中硬编码的选项，单击按钮下拉列表将替换为最新选项，并将基于第一个更新所选索引。您可以根据需要使用 selectedindex 或text。

相关文章：