使用 jQuery 在选择框选项更改上更改输入框占位符答案

【问题标题】：Change input box placeholder upon select box option change using jQuery使用 jQuery 在选择框选项更改上更改输入框占位符
【发布时间】：2019-02-18 01: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()])
)});

它不会正确更改占位符。我究竟做错了什么？任何建议都非常感谢！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

由于您在 placeholderText 对象中的键是 book、journal 和 newspaper，因此您希望获得 placeholderText['book'] 或 placeholderText['journal']。

因此，您应该获取值而不是所选项目的文本，因为在您的 HTML 代码中，选项中的值是 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">

【讨论】：