JavaScript中获取HTML元素自定义数据属性（data-*）的方法详解

<select onchange="sendInfo(this)" class="form-select js-dropdown" data-id="user_123" name="Item_Id[user_123]" id="ItemId_user_123" required="required">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
</select>

function sendInfo(element) {
    // 获取选中的值（例如：apple, banana等）
    const selectedValue = element.value; 
    console.log('选中的值:', selectedValue);

    // 使用 getAttribute() 获取 data-id 属性的值
    const dataId = element.getAttribute('data-id'); 
    console.log('数据ID (getAttribute):', dataId);
}

function sendInfo(element) {
    // 获取选中的值
    const selectedValue = element.value; 
    console.log('选中的值:', selectedValue);

    // 使用 dataset 属性获取 data-id 的值
    // 注意：这里直接使用 .id，而不是 .data-id
    const dataId = element.dataset.id; 
    console.log('数据ID (dataset):', dataId);

    // 如果HTML中存在 data-user-role="admin" 这样的属性，
    // 则可以通过 element.dataset.userRole 访问
    // const userRole = element.dataset.userRole;
    // console.log('用户角色 (dataset):', userRole);
}

<select onchange="handleSelectionChange(this)" class="form-select js-dropdown" 
        data-id="product_456" data-category="electronics" id="productSelect">
    <option value="">请选择</option>
    <option value="laptop">笔记本电脑</option>
    <option value="smartphone">智能手机</option>
    <option value="tablet">平板电脑</option>
</select>

function handleSelectionChange(selectElement) {
    // 获取选中的值
    const selectedValue = selectElement.value;
    console.log('选中的产品:', selectedValue);

    // 方法一：使用 getAttribute() 获取属性
    const productIdUsingGetAttribute = selectElement.getAttribute('data-id');
    const productCategoryUsingGetAttribute = selectElement.getAttribute('data-category');
    console.log('产品ID (getAttribute):', productIdUsingGetAttribute);
    console.log('产品分类 (getAttribute):', productCategoryUsingGetAttribute);

    // 方法二：使用 dataset 属性获取属性
    const productIdUsingDataset = selectElement.dataset.id;
    const productCategoryUsingDataset = selectElement.dataset.category; // data-category -> dataset.category
    console.log('产品ID (dataset):', productIdUsingDataset);
    console.log('产品分类 (dataset):', productCategoryUsingDataset);

    // 假设还有 data-manufacturing-date="2023-01-15"
    // const manufacturingDate = selectElement.dataset.manufacturingDate;
    // console.log('生产日期 (dataset):', manufacturingDate);
}