使用jQuery创建动态下拉框时选项内容内联追加的异常问题

看起来你是把数组里的所有值都直接塞进了单个<option>标签里，才导致所有选项挤在一起的。别担心，咱们来修正这个问题：

错误原因分析 #

你之前的代码应该是在循环时把数组值都拼接到了那个空的<option id="branch_list">的内容里，而不是为每个数组元素创建独立的<option>标签。这就导致所有城市名变成了同一个选项的文本。

修正后的完整代码 #

<body onload="getdata()">
  <select class="form-control" id="focusedinput" name="sBranchName" required>
    <!-- 可选：添加默认提示选项 -->
    <option value="">请选择分支</option>
  </select>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    function getdata () {
      var data = ['rajkot','surat','delhi'];
      var $select = $('#focusedinput');
      
      // 可选：如果需要清空现有选项（防止重复加载），取消下面注释
      // $select.empty().append('<option value="">请选择分支</option>');
      
      // 循环数组，为每个元素创建独立的option
      data.forEach(function(branchName) {
        // 创建新的option元素，设置value和显示文本
        var $option = $('<option>').val(branchName).text(branchName);
        // 把新选项追加到select中
        $select.append($option);
      });
    }
  </script>
</body>

关键修改点 #

1. 移除了多余的空<option id="branch_list">：我们不需要往单个option里塞内容，而是直接往<select>元素里添加新的option标签。
2. 循环创建独立选项：用forEach遍历数组，为每个分支名称创建一个全新的<option>，然后追加到下拉框中。
3. 可选的去重处理：如果这个函数可能被多次调用（比如刷新数据），可以先调用$select.empty()清空现有选项，再重新添加（记得把默认提示选项也加回来）。

这样修改后，每个城市都会成为下拉框里的独立选项，不会再挤在一起啦！

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