如何有条件地填充窗体的占位符？

<input type="text" placeholder="请输入用户名">
<textarea placeholder="请输入评论内容"></textarea>

<select id="countrySelect" onchange="setPlaceholder()">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="uk">英国</option>
</select>

<input type="text" id="nameInput">

<script>
function setPlaceholder() {
  var countrySelect = document.getElementById("countrySelect");
  var nameInput = document.getElementById("nameInput");

  if (countrySelect.value === "china") {
    nameInput.placeholder = "请输入中文姓名";
  } else {
    nameInput.placeholder = "Please enter your name";
  }
}
</script>

<style>
::placeholder {
  color: red;
  font-style: italic;
}
</style>

<input type="text" placeholder="请输入用户名">