2

允许使用 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 框架。

4

3 回答 3

2

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

option您可以使用 HTML5data-样式属性将要显示的占位符设置为每个元素的属性。然后使用 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);
});
于 2013-08-12T19:19:53.080 回答
1

它需要 JavaScript。您可以内联进行 - 如果这就是您所说的仅 HTML 的意思。

<select onchange="document.querySelector('input').setAttribute('placeholder', 'Enter your ' + this.options[this.selectedIndex].text);"></select>
于 2013-08-13T00:11:36.350 回答
0

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

http://jsfiddle.net/sW6QP/

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

如果您想在没有 jQuery 的情况下执行此操作，请将选择行更改为：

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

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

function setPlaceholder() {

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

于 2013-08-12T19:20:12.707 回答