如何在PHP foreach循环中获取select选项的选中文本

嘿，我知道你遇到的问题了——在PHP foreach循环生成多个select元素时，你的JavaScript代码会返回所有选中选项的文本，而不是你当前操作的那个，对吧？这是因为事件处理里的选择器没有精准定位到当前触发事件的元素，咱们来修复它！

问题根源 #

当页面存在多个select（毕竟是循环生成的），你原来代码里的$('select').closest('tr')会选中所有select的父级<tr>，后续.find(":selected").text()自然会把所有选中选项的文本拼接起来返回，而不是你要的当前操作项的文本。

修正后的JavaScript代码 #

$('select').change(function(){
    // 用$(this)指代当前触发change事件的那个select元素
    var closestTr = $(this).closest('tr');
    // 精准定位当前行里的目标select，再获取选中文本
    var conceptName = $('.select-tlp', closestTr).find(":selected").text();
    console.log(conceptName);
});

更简洁的优化写法（可选） #

其实你甚至不需要找父级tr，直接通过$(this)就能获取当前选中的文本，代码更简洁：

$('select').change(function(){
    var conceptName = $(this).find(":selected").text();
    console.log(conceptName);
});

为什么这样改？ #

• $(this)在事件回调函数里，指向的是当前触发事件的DOM元素，也就是你刚刚点击操作的那个select，这样就不会误选中页面上其他的select元素。
• 如果你后续需要操作当前行的其他元素，第一种写法里的$(this).closest('tr')只会定位到当前select所在的那一行，而不是所有行，精准度拉满。

另外，顺便提个小细节：你的HTML代码里select标签的闭合写错了，最后一个<select>应该是</select>，这个小错误可能导致DOM结构异常，建议修正：

<td>
    <select class="select-tlp form-control">
        <option style="display:none;" selected><?php echo $tlp; ?></option>
        <option>RED</option>
        <option>WHITE</option>
        <option>GREEN</option>
    </select> <!-- 这里是闭合标签，不是<select> -->
</td>

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