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

时间:2012-07-26 19:50:03

标签: javascript jquery html

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

<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>

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

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

2 个答案:

答案 0 :(得分:2)

请参阅此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());       
});

答案 1 :(得分:1)

这是你要找的吗?

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