Question

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

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

同样适用于'ID' - ＆gt; '输入您的ID'。

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

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

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

Answer 1

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

您可以使用HTML5 option样式属性设置要在每个data-元素上显示为属性的占位符。然后使用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);
});

Answer 2

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

http://jsfiddle.net/sW6QP/

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

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

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

而不是$("#selectionType").on("change",function() {，请改为：

function setPlaceholder() {

（务必将});更改为}）

Answer 3

它需要JavaScript。你可以内联 - 如果你只是HTML的意思。

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

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

3 个答案: