Question

我有一个select元素和两个文本框。当用户单击列表选项时，将在这两个文本框中填充id和名称（文本）。

我希望能够通过单击按钮更新选择的文本部分，确保更新文本框中反映的ID。以下是我一直在使用的内容：

HTML：

    <select name="categories" id="categories" multiple>
       <option value="1">Baby pictures</option>
       <option value="2">Animals</option>
       <option value="3">Nature</option>
    </select>


    <input type="text" name="catID" id="catID" />
    <input type="text" name="selCat" id="selCat" />
    <input type="button" id="update" value="update" />

jquery的：

        $('#update').click(function() {
            var selID;
            var selCat;

            selID = $('#catID').val();
            selCat = $('#selCat').val();

            $('#categories').val(selID).text(selCat);
        })

我尝试了几种不同的东西 - 这是唯一一个对列表本身产生影响的东西。虽然，它完全清空它。 HEH

任何帮助都将不胜感激。

Answer 1

如果要在单击更新按钮时向select元素添加新选项，请尝试

$('#update').click(function () {
    var selID;
    var selCat;

    selID = $('#catID').val();
    selCat = $('#selCat').val();

    $('#categories').append($('<option />', {
        val: selID,
        text: selCat
    }));
})

更新现有项目

$('#update').click(function () {
    var selID = $('#catID').val();
    var selCat = $('#selCat').val();

    $('#categories option[value="' + selID + '"]').text(selCat)
})

演示：Fiddle

通过ID动态设置select元素的文本

1 个答案: