Question

我有一个下拉菜单和输入框的以下代码：

<select id="ci_binfo_affiliation_type" style="" onblur="updateptcname()" onchange="changecolor()" name="ci_binfo_affiliation_type" class="styled">
  <option <? if ($ci_binfo_affiliation_type == "") echo 'selected'; ?> value="">Select</option>
   <option <? if ($ci_binfo_affiliation_type == "work") echo 'selected'; ?> value="work">work</option>
  <option <? if ($ci_binfo_affiliation_type == "Other") echo 'selected'; ?> value="Other">Other</option>
</select>
<label class="formlbl" for="name_aftd">Name of (affiliation)</label>
<div class="formbitem">
      <input id="ci_binfo_affiliation_name" type="text" onchange="updateptcname()" name="ci_binfo_affiliation_name" value="<?=$ci_binfo_affiliation_name?>" class="inputtext2" />
    </div>

我想要发生的是：如果用户在下拉菜单中选择“学校”，那么在“（联属）名称”标签中必须更改为“学校名称”。

任何人都可以帮助我，我该怎么做......

Answer 1

请参阅此example on jsfiddle。它将函数绑定到select元素的change事件。此函数会在span（id：label）中获取新的affiliation-placeholder元素，并将其文本内容设置为所选option的值。

您可能想要清理其他事件侦听器（例如changecolor，在我的示例中抛出is not defined。首选方法是从JavaScript代码绑定侦听器，而不是在HTML中内联。

document.getElementById("ci_binfo_affiliation_type")
    .addEventListener("change",function(){
        document.getElementById("affiliation-placeholder").textContent = this.value;
})

使用jQuery 1.7（也添加了我添加的新span，但如果需要可以轻松修改）：

$("#ci_binfo_affiliation_type").on("change", function(){
    $("#affiliation-placeholder").text($(this).val());       
});

Answer 2

这是你要找的吗？

$("#ci_binfo_affiliation_type").change(function() {
    $("label[for='name_aftd']").text("Name of " + $(this).val());
});

取决于更改标签的下拉选项

2 个答案: