根据下拉列表填充和禁用文本字段

populate and disable text field depending on dropdown

本文关键字：文本 字段 下拉列表 填充      更新时间：2023-09-26

遗憾的是，我对javascript/jQuery不太熟悉。我有一张带有下拉列表的表格。我需要做的是根据下拉列表的选择来填充一个文本字段。下拉列表的第一个声音是"其他"，所以文本字段必须是可写的，然后从第二个开始，我想自动分配一个值并禁用文本字段。

下拉列表的值将保存在数据库中，因此它必须保留选项的名称。

我在谷歌上找到了几个解决方案，但没有一个符合我的需求。。。希望有人能帮助我。

要创建您想要的功能，您需要学习一些基本的东西。

jQuery选择器

首先，如果您还不熟悉jQuery的选择器语法，请在这里了解它。

.change（）事件

接下来，您需要了解如何绑定到下拉菜单的.change事件。一种方法是$('#dropdownId').change(function() { ... });，它只是$('#dropdownId').on('change', function() { ... });的快捷方式。在回调函数中，您可以使用this访问下拉列表元素，从而使用$(this)访问jQuery对象。

然后，我们可以用$（this）.val（）获取下拉列表的值，并使用一些基本逻辑来启用/禁用文本框并设置其值。

启用/禁用文本框

为了启用/禁用文本框，您可以使用：$（'#txt'）.removeAttr（'disabled'）；and$（'#txt'）.attr（'disabled'，'true'）；`分别地

示例
我在一个示例fiddle中为您组合了所有这些，向您展示如何在这个jsFiddle中将它们组合在一起。如果您对它的工作原理有任何疑问，请告诉我：）

这是给你的小提琴。。。

http://jsfiddle.net/G3V3v

HTML：

<select id="ddl">
    <option value="0">[ Other ]</option>
    <option value="1">First</option>
    <option value="2">Second</option>
</select>
<input id="txt" />

jQuery：

$('#ddl').change(function() {
    if ($(this).val() == 0) {
        $('#txt').val('').removeAttr("disabled").focus();
    } else {
        $('#txt').val($(this).children('option:selected').text());
        $('#txt').attr("disabled", "disabled");
    }
});
相关文章：