优化PHP循环中动态生成元素的JavaScript交互：事件委托与数据属性实践

foreach ( $order->get_items() as $item_id => $item ) {

    echo 'Service Area:';
    echo '<select id="serviceareaselect">'; // ID在循环中重复
    echo '<option value="servicearea">Select an Area...</option>';
    echo '<option value="area1">Area 1</option>';
    echo '<option value="area2">Area 2</option>';
    echo '</select>';

    // Service Area 1
    echo '<div id="area1" class="servicearea" style="display:none">'; // ID在循环中重复
    echo '<input type="checkbox" id="dur1" name="dur1" value="Dur1"><label for="vehicle1">Dur1</label><br>';
    echo '<input type="checkbox" id="dur2" name="dur2" value="Dur2"><label for="vehicle1">Dur2</label><br>';
    echo '</div>';

    // Service Area 2
    echo '<div id="area2" class="servicearea" style="display:none">'; // ID在循环中重复
    echo '<input type="checkbox" id="aln1" name="aln1" value="Aln1"><label for="vehicle1">Aln1</label><br>';
    echo '<input type="checkbox" id="aln2" name="aln2" value="Aln2"><label for="vehicle1">Aln2</label><br>';
    echo '</div>';

}

$(function() {
    $("#serviceareaselect").change(function(){ // 只会绑定到第一个ID匹配的元素
        $(".servicearea").hide(); // 隐藏所有class为servicearea的元素，可能不是期望的行为
        $("#" + $(this).val()).show(); // 只会显示第一个ID匹配的元素
    });
});

foreach ( $order->get_items() as $item_id => $item ) {
    echo '<section class="service-area-component">'; // 新增一个父容器，并添加类名以便区分
    echo '  Service Area:';
    echo '  <select name="serviceareaselect">'; // 移除ID，使用name属性
    echo '    <option value="servicearea">Select an Area...</option>';
    echo '    <option value="area1">Area 1</option>';
    echo '    <option value="area2">Area 2</option>';
    echo '  </select>';

    // Service Area 1
    echo '  <div data-id="area1" class="servicearea" style="display:none">'; // 移除ID，使用data-id属性
    echo '    <label><input type="checkbox" name="dur1" value="Dur1">Dur1</label><br>';
    echo '    <label><input type="checkbox" name="dur2" value="Dur2">Dur2</label><br>';
    echo '  </div>';

    // Service Area 2
    echo '  <div data-id="area2" class="servicearea" style="display:none">'; // 移除ID，使用data-id属性
    echo '    <label><input type="checkbox" name="aln1" value="Aln1">Aln1</label><br>';
    echo '    <label><input type="checkbox" name="aln2" value="Aln2">Aln2</label><br>';
    echo '  </div>';
    echo '</section>';
}

document.addEventListener('change', e => {
  // 检查事件是否由name为'serviceareaselect'的select元素触发
  if (e.target.name === 'serviceareaselect') {
    // 获取当前select元素的父容器（即包含该组件的<section>）
    let parentSection = e.target.parentNode; 

    // 隐藏当前父容器内所有class为'servicearea'的div
    parentSection.querySelectorAll('.servicearea').forEach(n => n.style.display = 'none');

    // 如果select选项不是第一个（"Select an Area..."），则显示对应data-id的div
    if (e.target.options.selectedIndex > 0) {
      // 使用模板字符串和数据属性选择器查找并显示对应的div
      parentSection.querySelector(`[data-id="${e.target.value}"]`).style.display = 'block';
    }
  }
});

label {
    display: block; /* 让label独占一行 */
    margin-bottom: 5px;
}
.service-area-component {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}