javascript - 占位符不更新选项值

$(function() {
  var myOption= $("#mySelect option:selected").val();
 $("#search").attr("placeholder", myOption);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="search" id="search">
</form>
<select id="mySelect">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

对于您而言，这将是一个简单的解决方案，但我只是坚持这一点。
为什么占位符不更新期权价值？

最佳答案

按照编写的方式，您的代码在页面加载后仅运行一次。要使其在选择更改时运行，请添加事件侦听器以使用新值重新运行代码。

$(function() {
  function setPlaceholder() {
    var myOption= $("#mySelect option:selected").val();
    $("#search").attr("placeholder", myOption);
  }
  setPlaceholder();
  $("#mySelect").change(setPlaceholder);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="search" id="search">
</form>
<select id="mySelect">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>