Question

我在表单中有以下<select>：

<select style="width: 100px; text-align: center;">
  <option value="email">Email</option>
  <option value="telephone">Phone</option>
</select>

默认选项为Email，因此显示以下<input>：

<p class="email_form">Please supply your Email Address</p>
<input onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" style="width: 270px" type="email" name="email" id="email" value="jose.gonzalez@hotmail.com">

但是，如果他们选择telephone我想更改以上内容以询问电话号码？

Answer 1

最快的方法是给'标签'段落一个（更通用的）ID，并且：

<p id="contact_method">Please supply your Email Address</p>

document.getElementById("selectId").onchange = function() {
    var value = this.options[this.selectedIndex].value;
    var p = document.getElementById("contact_method");
    if(value == 'telephone') {
        p.innerHTML = 'Please supply your phone number';
    } else {
        p.innerHTML = 'Please supply your email address';
    }
}

在此处试试：http://jsfiddle.net/29w2G/

Answer 2

如果您仍在使用HTML5，为什么不使用placeholder元素代替input元素呢？然后，您可以使用JavaScript后备功能使其在尚不支持此功能的浏览器中运行，例如this one：

input onfocus

如果您使用的是jQuery，则可以使用我的HTML5 placeholder jQuery plugin。

根据表单<select> value </select>设置文本

2 个答案: