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

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