如何获取子元素select的选中值？解决jQuery取值返回undefined问题

核心问题分析 #

你遇到的undefined是因为jQuery选择器语法错误，同时HTML里存在id拼写错误，导致无法正确定位元素并获取值。

具体修复步骤 #

1. 修正jQuery选择器的引号闭合问题 #

原代码中选择器少了一个闭合双引号，这是导致找不到下拉元素的关键：

// 错误写法：引号未闭合
var req_type = $(this).find('select[id^="requirement_type_]:selected').val();

// 正确写法：补上闭合双引号
var req_type = $(this).find('select[id^="requirement_type_"]:selected').val();

2. 修复HTML中id的拼写错误 #

你的certification对应的div id多了一个g，把requirement_certificationg改成requirement_certification，否则即使拿到选中值也找不到对应元素：

<!-- 错误写法 -->
<div class="d-none" id="requirement_certificationg[0]">
  certification
</div>

<!-- 正确写法 -->
<div class="d-none" id="requirement_certification[0]">
  certification
</div>

3. 优化行ID提取逻辑（可选） #

原代码提取的req_row_id是带括号的（比如[0]），可以直接提取括号内的数字，让代码更简洁：

var req_row_id_matches = req_parent_div_id.match(/\[(.*?)\]/);
// 取匹配组的第1项，拿到纯数字
var req_row_id = req_row_id_matches[1];
// 后面拼接的时候再加上括号
$('#requirement_' + req_type + '[' + req_row_id + ']').removeClass('d-none');

4. 添加下拉菜单切换监听（增强功能） #

如果需要用户切换下拉选项时实时更新显示内容，需要添加change事件监听：

$(document).ready(function() {
    // 初始化显示默认选中的内容
    $('div[id^="requirement_row"]').each(function(i) {
        var $row = $(this);
        $row.removeClass('d-none');
        
        var req_parent_div_id = this.id;
        var req_row_id_matches = req_parent_div_id.match(/\[(.*?)\]/);
        var req_row_id = req_row_id_matches[1];
        
        var req_type = $row.find('select[id^="requirement_type_"]:selected').val();
        // 先隐藏当前行所有内容div，再显示选中的
        $row.find('div[id^="requirement_"]').addClass('d-none');
        $('#requirement_' + req_type + '[' + req_row_id + ']').removeClass('d-none');
    });

    // 监听下拉菜单切换事件
    $('select[id^="requirement_type_"]').on('change', function() {
        var $row = $(this).closest('div[id^="requirement_row"]');
        var req_parent_div_id = $row.attr('id');
        var req_row_id_matches = req_parent_div_id.match(/\[(.*?)\]/);
        var req_row_id = req_row_id_matches[1];
        
        var req_type = $(this).val();
        // 隐藏所有内容div，显示选中的
        $row.find('div[id^="requirement_"]').addClass('d-none');
        $('#requirement_' + req_type + '[' + req_row_id + ']').removeClass('d-none');
    });
});

完整修复后的代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

<div class="d-none" id="requirement_row[0]">
  <div>
    <select id="requirement_type_0">
      <option value="training">Training</option>
      <option value="certification" selected>Certification</option>
    </select>
  </div>
  <div class="d-none" id="requirement_training[0]">
    training
  </div>
  <div class="d-none" id="requirement_certification[0]">
    certification
  </div>
</div>

<div class="d-none" id="requirement_row[1]">
  <div>
    <select id="requirement_type_1">
      <option value="training" selected>Training</option>
      <option value="certification">Certification</option>
    </select>
  </div>
  <div class="d-none" id="requirement_training[1]">
    training
  </div>
  <div class="d-none" id="requirement_certification[1]">
    certification
  </div>
</div>

JavaScript部分 #

$(document).ready(function() {
    $('div[id^="requirement_row"]').each(function(i) {
        var $row = $(this);
        $row.removeClass('d-none');
        
        var req_parent_div_id = this.id;
        var req_row_id_matches = req_parent_div_id.match(/\[(.*?)\]/);
        var req_row_id = req_row_id_matches[1];
        
        var req_type = $row.find('select[id^="requirement_type_"]:selected').val();
        $row.find('div[id^="requirement_"]').addClass('d-none');
        $('#requirement_' + req_type + '[' + req_row_id + ']').removeClass('d-none');
    });

    $('select[id^="requirement_type_"]').on('change', function() {
        var $row = $(this).closest('div[id^="requirement_row"]');
        var req_parent_div_id = $row.attr('id');
        var req_row_id_matches = req_parent_div_id.match(/\[(.*?)\]/);
        var req_row_id = req_row_id_matches[1];
        
        var req_type = $(this).val();
        $row.find('div[id^="requirement_"]').addClass('d-none');
        $('#requirement_' + req_type + '[' + req_row_id + ']').removeClass('d-none');
    });
});

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