使用jQuery更改选择框选项时更改输入框占位符
使用jQuery更改选择框选项时更改输入框占位符
提问于 2019-02-18 09:44:37
我已经创建了一个输入框，如果选择框的选定选项发生更改，则占位符也会更改。请看一下小提琴：https://jsfiddle.net/dL2aqckj/2/
这是html：
<select id="selector">
<option value="book">Book</option>
<option value="journal">Journal</option>
<option value="newspaper">Newspaper</option>
</select>
<input type="text" id="searchbox" placeholder="Find Book" size="20">这就是JavaScript：
var selector = $("#selector");
var searchbox = $("#searchbox");
selector.on("change", function () {
searchbox.attr('placeholder', "Find " + selector.find(':selected').text()
)});这一切都运行得很好。现在，我希望占位符包含自定义文本，而不仅仅是选择框选项的名称。因此，我尝试将选择框中的选定选项与一些占位符文本相匹配。这就是小提琴：https://jsfiddle.net/2x5m746e/1/
JavaScript代码：
var placeholderText = {
"book": "Enter book ID",
"journal": "Enter journal ID",
"newspaper": "Enter newspaper ID",
};
var selector = $("#selector");
var searchbox = $("#searchbox");
selector.on("change", function () {
searchbox.attr('placeholder', searchbox.val(placeholderText[selector.find(':selected').text()])
)});它不会正确更改占位符。我做错了什么？任何建议都是非常感谢的！
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-18 10:17:13
由于您的placeholderText对象中的键是book、journal和newspaper，因此您希望获取placeholderText['book']或placeholderText['journal']。
所以你应该得到的值，而不是所选项目的文本，因为在你的超文本标记语言代码中，你在选项中的值是book，journal & newspaper。
var placeholderText = {
"book": "Enter book ID",
"journal": "Enter journal ID",
"newspaper": "Enter newspaper ID",
};
$("#selector").on("change", function () {
$("#searchbox").attr('placeholder', placeholderText[$(this).find(':selected').val()]);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selector">
<option value="book">Book</option>
<option value="journal">Journal</option>
<option value="newspaper">Newspaper</option>
</select>
<input type="text" class="form-control" id="searchbox" placeholder="Enter book ID" size="20">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54739400
复制相关文章
相似问题
腾讯云开发者
