为何通过索引而非.val()实现的下拉选择功能失效？为何始终提示‘sort area’？

咱们来一步步拆解你的两个问题，代码里的核心错误其实都是前端新手很容易踩的坑：

问题1：为什么用索引而非.val()实现的功能无法正常工作？ #

你这里犯了两个关键错误：

• 索引获取对象错误：你写的$(this).index（还漏掉了方法调用的括号()），获取的是<select>元素本身在同辈元素中的位置，而不是你选中的<option>的索引！要拿到选中选项的索引，应该用$(this).find('option:selected').index()，这才是定位到选中的那个option的索引值。
• 赋值/比较运算符搞混了：if ($(this).index = 0)这行里的=是赋值运算符，不是比较是否相等的==或===。这行代码的作用是把0赋值给$(this).index，而不是判断它是否等于0，条件判断自然完全失效。

问题2：为什么选任何选项都得到‘sort area’的反馈？ #

还是因为赋值运算符的误用：
在else if ($(this).index = 1)这行，你把1赋值给$(this).index，而赋值表达式的返回值就是1——在JavaScript里，1属于“真值”，所以这个条件永远会被判定为真。不管你选第一个还是第二个选项，都会执行这个分支的alert，自然总是看到‘sort area’。

修正后的代码（用索引实现） #

$('select[name="sorting"]').change(function(){
    // 获取选中option的索引
    const selectedIndex = $(this).find('option:selected').index();
    if (selectedIndex === 0){
        alert("sort country");
    } else if (selectedIndex === 1){
        alert("sort area");
    }
});

更推荐的写法（用.val()，稳定性更高） #

其实用val()会更靠谱，因为如果后续调整option的顺序，索引会失效，但value值不会。只需要给option加上value属性：

<select name="sorting">
    <option value="country" selected>Country</option>
    <option value="area">Area</option>
</select>

对应的JavaScript代码：

$('select[name="sorting"]').change(function(){
    const selectedValue = $(this).val();
    if (selectedValue === "country"){
        alert("sort country");
    } else if (selectedValue === "area"){
        alert("sort area");
    }
});

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