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

Changing the placeholder text based on the users choice

本文关键字：占位符 文本 选择 用户      更新时间：2023-09-26

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进行更新。

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

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

工作演示

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);
});

它需要JavaScript。您可以在内联中执行它——如果这只是HTML的意思的话。

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

有关如何做到这一点的示例，请参阅以下jsfiddle：

http://jsfiddle.net/sW6QP/

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

如果你想在没有jQuery的情况下完成，请将选择行更改为：

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

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

function setPlaceholder() {

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

相关文章：