无法获取动态添加select的selectedIndex报错问题求助

数据老陈

2026-8-5

问题分析与解决

核心问题1：`getElementById`使用错误

你写的代码里：

var index = document.getElementById("#product_"+row_id).selectedIndex;

这里犯了基础错误：document.getElementById()的参数是纯ID字符串，不需要加#前缀。加#后浏览器找不到对应元素，返回null，因此抛出Cannot read properties of null (reading 'selectedIndex')错误。

正确写法：

var index = document.getElementById("product_"+row_id).selectedIndex;

核心问题2：Select2插件对原生DOM的干扰

你给select元素初始化了Select2插件（$(".product").select2();），该插件会替换原生select为自定义DOM结构，直接操作原生select的selectedIndex会出现不准确或无法获取的情况。

推荐两种获取选中索引的方式：

方式1：jQuery+原生DOM结合

通过jQuery获取原生DOM元素后再访问selectedIndex：

var selectElement = $("#product_"+row_id)[0]; // 等价于.get(0)
var index = selectElement.selectedIndex;

方式2：使用Select2官方API

利用Select2提供的方法获取选中数据，再匹配原生option的索引：

var selectedData = $("#product_"+row_id).select2('data')[0];
var index = $("#product_"+row_id+" option").filter(function() {
    return $(this).val() === selectedData.id;
}).index();

针对你移除option的需求优化

你当前硬编码eq(2)移除option，想要基于选中索引操作，可按以下方式实现：

var $select = $("#product_"+row_id);
var selectElement = $select[0];
var selectedIndex = selectElement.selectedIndex;
// 移除对应索引的option（索引从0开始计数）
$select.find("option:eq(" + selectedIndex + ")").remove();

如果是要移除默认的--Select Products--选项，直接通过文本或属性匹配更可靠：

// 通过文本匹配
$("#product_"+row_id+" option:contains('--Select Products--')").remove();
// 或者通过selected属性匹配
$("#product_"+row_id+" option[selected]").remove();