Question

我需要一个JavaScript，让我可以根据另一个选择列表类型的字段自动填充文本字段。

这是我的HTML标记：

<div class="attribute-16 even"><div id="edit-attributes-16-wrapper" class="form-item">
 <label for="edit-attributes-16">Position: <span class="form-required">*</span></label>
 <select id="edit-attributes-16" class="form-select required" name="attributes[16]"><option selected="selected" value="">Please select</option><option value="32">Content</option><option value="33">Footer</option></select>
</div> </div>

<div class="attribute-17 odd"><div id="edit-attributes-17-wrapper" class="form-item">
 <label for="edit-attributes-17">Anchor Text: <span class="form-required">*</span>: </label>
 <input type="text" class="form-text attribute" value="" size="60" id="edit-attributes-17" name="attributes[17]" maxlength="128">
</div> </div>

前一个字段的值将自动输入为后一个字段的值。这就是我想在这里做的事。

Answer 1

您必须向选择字段添加事件侦听器，并将其值填充到文本字段中。你的HTML有点乱......所以我只会编写jquery。你可以摆弄它。

您必须在加载正文后立即设置此事件侦听器。那么在你的HTML上

<body onload="init()" id="stage" class="theme">

和你的javascript

function init() {
   $("#selectListID").on("change", function(){
      var value = $(this).val();
      $("#inputFieldID").val(value);
   };)
}

希望这有帮助。

Answer 2

<label for="edit-attributes-16">Position: <span class="form-required">*</span></label>
<select id="edit-attributes-16" class="form-select required" name="attributes[16]" onchange="document.getElementById('attributes-16-text').innerHTML=document.getElementById('edit-attributes-16').value;">
<option selected="selected" value="">Please select</option><option value="32">Content</option>
<option value="33">Footer</option>
</select>
<div id="attributes-16-text"> </div>

现场演示：http://jsfiddle.net/C7pnj/1/

关键是使用 onchange事件处理程序来检测用户操作。

我还建议在id属性中避免使用“ - ”。

P.S。：正如其他人所指出的，本论坛的目的是帮助您，而不是为您完成所有工作。

根据其他字段的值自动填充字段

2 个答案: