为下拉选项对应输入框设置占位文本，现有代码失效求助

你的问题出在两个核心点上：一是误用了设置输入框内容的方法，二是选了不合适的事件触发逻辑。我来帮你修正并优化：

问题分析 #

你原本的代码用$("#ModalDetail").val(...)把文本设置成了输入框的当前内容，但你需要的是输入框的placeholder提示文本——这是输入框的专属属性，得用attr()或prop()来修改。另外，click事件会在你点击下拉框（比如展开选项）时就触发，这不是你想要的，应该用change事件，只有选中的选项发生变化时才执行逻辑。

修正后的代码方案 #

方案1：保留原有的占位文本对象

保留你的HTML结构，仅修改JavaScript代码：

<!-- 你的HTML结构不变 -->
<select id="ModalContactType">
  <option value="0">--Please Select--</option>
  <option value="1">Mobile</option>
  <option value="2">Landline</option>
  <option value="3">FAX</option>
  <option value="4">Email</option>
</select>

<div class="input-group">
  <div class="input-group-addon">Detail</div>
  <input type="text" id="ModalDetail" class="form-control">
</div>

var placeholderText = { 
  "Mobile": "0932-XXX-XXXX or 0932xxxxxxx", 
  "Landline": "123-4567", 
  "FAX": "+(country code)(area code)(fax number)", 
  "Email": "sample@example.com" 
}; 

$("#ModalContactType").on("change", function () { 
  // 获取选中选项的文本
  const selectedText = $(this).find("option:selected").text();
  
  if (this.value !== "0") { 
    // 设置输入框的placeholder属性
    $("#ModalDetail").attr("placeholder", placeholderText[selectedText]); 
  } else { 
    // 选择默认选项时清空占位文本
    $("#ModalDetail").attr("placeholder", ""); 
  } 
});

方案2：更简洁的data属性方案（推荐）

把占位文本直接存在<option>的data-*属性里，不用单独维护一个对象，代码更简洁易维护：

<select id="ModalContactType">
  <option value="0">--Please Select--</option>
  <option value="1" data-placeholder="0932-XXX-XXXX or 0932xxxxxxx">Mobile</option>
  <option value="2" data-placeholder="123-4567">Landline</option>
  <option value="3" data-placeholder="+(country code)(area code)(fax number)">FAX</option>
  <option value="4" data-placeholder="sample@example.com">Email</option>
</select>

<div class="input-group">
  <div class="input-group-addon">Detail</div>
  <input type="text" id="ModalDetail" class="form-control">
</div>

$("#ModalContactType").on("change", function () { 
  // 获取选中选项的data-placeholder值，默认空字符串
  const placeholder = $(this).find("option:selected").data("placeholder") || "";
  // 设置占位文本
  $("#ModalDetail").attr("placeholder", placeholder); 
});

关键改动说明 #

1. 事件替换：用change替代click，确保只有选中选项变化时才触发逻辑，避免误触发。
2. 属性修改：用attr("placeholder", ...)替代val(...)，修改的是输入框的占位提示属性，而不是输入框的内容。
3. 代码优化：方案2把数据和HTML绑定，减少了单独维护对象的成本，更符合前端开发的最佳实践。

内容的提问来源于stack exchange，提问作者Snow