如何使用.html()方法仅获取下拉选择框的选中选项？

问题场景 #

调用$("#form").html()时，返回的HTML会包含下拉选择框的全部选项，示例输出：

<select id="Select1" name="Select1">
<option value="Data1">Data1</option>
<option value="Data2">Data2</option>
<option value="Data3">Data3</option>
<option selected="selected" value="Data4">Data4</option>
</select>

但实际需求是仅获取包含选中选项的下拉框代码，期望输出：

<select id="Select1" name="Select1">
<option selected="selected" value="Data4">Data4</option>
</select>

解决方案 #

原生的.html()方法会直接返回元素的原始DOM内容，无法直接过滤选项。你需要通过克隆元素并修改副本的方式实现，避免影响页面上的真实DOM：

单个下拉框处理 #

// 克隆目标select元素，不影响原页面的下拉框
const $selectClone = $('#Select1').clone();
// 删除副本中未选中的选项
$selectClone.find('option:not(:selected)').remove();
// 获取处理后的完整HTML（包含select标签）
const resultHtml = $selectClone.prop('outerHTML');

整个表单处理 #

如果要处理表单内所有下拉框，批量操作即可：

// 克隆整个表单
const $formClone = $('#form').clone();
// 遍历表单内所有select，删除未选中选项
$formClone.find('select').each(function() {
  $(this).find('option:not(:selected)').remove();
});
// 获取处理后的表单HTML
const formResultHtml = $formClone.html();

说明 #

• 使用.clone()是为了保留原页面的DOM结构，避免用户看到下拉框选项被删除的变化
• option:not(:selected)是jQuery选择器，精准筛选未选中的选项
• 若需要获取包含select自身的完整标签，用outerHTML；若只需要select内部的HTML，用.html()即可

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