javascript - 占位符不更新选项值

Question

$(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>

这对您来说是一个简单的解决方案，但我只是坚持这一点。为什么占位符不更新选项值？

Answer 1

如所写，您的代码仅在页面加载后运行一次。要使其在选择更改时运行，请添加一个事件监听器以使用新值重新运行您的代码。

$(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>