根据用户选择更改占位符文本答案

【问题标题】：Changing the placeholder text based on the users choice根据用户选择更改占位符文本
【发布时间】：2013-08-12 19:07:18
【问题描述】：

允许使用 jQuery，但首选纯 HTML 解决方案。

我有一个带有几个选项的选择框。当用户选择“姓名”时，我希望占位符文本“输入您的姓名”出现在相邻的文本框中。

同样适用于“ID”->“输入您的 ID”。

见http://jsfiddle.net/Uy9Y3/

<select>
    <option value="-1">Select One</option>
    <option value="0">Name</option>
    <option value="1">ID</option>
</select>
<input type="text">

这是一个我无法弄清楚的客户的要求。

如果有帮助，该网站正在使用 Spring 框架。

【问题讨论】：

标签： javascript html spring

【解决方案1】：

由于您需要在选择更新时更新占位符，因此您需要使用 javascript 来执行此操作。

您可以使用 HTML5 data- 样式属性将要显示的占位符设置为每个 option 元素的属性。然后使用jQuery附加一个更改事件监听器，它将更新输入框的占位符属性。

请注意，占位符属性在旧版本的 IE 中没有任何影响，因此如果您需要支持旧 IE，则需要使用另一个库来填充该功能。

Working Demo

HTML

<select id="mySelect">
    <option data-placeholder="" value="-1">Select One</option>
    <option data-placeholder="Enter your name" value="0">Name</option>
    <option data-placeholder="Enter your ID"  value="1">ID</option>
</select>
<input id="myInput" type="text">

jQuery

$('#mySelect').on('change', function() {
    var placeholder = $(this).find(':selected').data('placeholder');
    $('#myInput').attr('placeholder', placeholder);
});

【讨论】：

【解决方案2】：

它需要 JavaScript。你可以内联——如果这就是你所说的仅 HTML 的意思。

<select onchange="document.querySelector('input').setAttribute('placeholder', 'Enter your ' + this.options[this.selectedIndex].text);"></select>

【讨论】：

【解决方案3】：

有关如何执行此操作的示例，请参见以下 jsfiddle：

http://jsfiddle.net/sW6QP/

请注意，这仅使用 jQuery，因为 jsfiddle 似乎无法找到放置在 onChange 事件中的函数。

如果你想不使用 jQuery，请将选择行更改为：

<select id="selectionType" onChange="setPlaceholder();">

而不是$("#selectionType").on("change",function() {，而是这样做：

function setPlaceholder() {

（确保也将}); 更改为}）

【讨论】：