javascript - 使用 jQuery 在选择框选项更改时更改输入框占位符

Question

我创建了一个输入框，如果更改了选择框的所选选项，占位符也会更改。请看一下 fiddle :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()
)});

这一切都很好。现在我希望占位符包含自定义文本，而不仅仅是选择框选项的名称。因此，我试图将选择框选择的选项与一些占位符文本相匹配。这是 fiddle :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()])
)});

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

Answer 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">