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

Question

不幸的是，我对 javascript/jQuery 不太熟悉。我有一个带有下拉菜单的表单。我需要做的是根据下拉列表的选择填充文本字段。下拉菜单的第一个声音是“其他”，因此文本字段必须是可写的，然后从第二个开始我想自动分配一个值并禁用文本字段。

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

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

Answer 1

要创建您正在寻找的功能，您需要学习一些基本知识。

jQuery 选择器

首先，如果您还不熟悉 jQuery 的选择器语法，learn about it here。

.change() 事件

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

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

启用/禁用文本框

为了启用/禁用文本框，您可以使用：$('#txt').removeAttr('disabled');and$('#txt').attr('disabled', 'true ');` 分别。

示例
我已经在一个示例小提琴中为您组合了所有这些，以向您展示如何将这些放在jsFiddle 中。如果您对它的工作原理有任何疑问，请告诉我:)

Answer 2

这是给你的小提琴......

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