jquery最后选择选择器值答案

【问题标题】：jquery last select selector valuejquery最后选择选择器值
【发布时间】：2017-05-02 19:04:45
【问题描述】：

我一直在尝试获取我的第二个选择“选定”值，但它总是返回我“”。实际上我在第二个选择中选择了第二个选项。它似乎一直返回给我第一个选项，而不是实际选择的选项。

这是显示的 HTML：

<table class="table table-striped" id="tableButtonsFilter">
    <tbody>
        <tr id="firstLineFilters">
            <td>
                <button class="btn btn-glintt btn-circle btn-lg" id="1" name="buttonFilterResultsCabecalho" disabled="">
                  <i class="icon fa fa-search"></i>
                </button>
            </td>
            <td><button class="btn btn-glintt btn-circle btn-lg" id="1" name="buttonFilterResultsCabecalho" disabled="">           <i class="icon fa fa-search"></i>           </button></td>
            <td><button class="btn btn-glintt btn-circle btn-lg" id="1" name="buttonFilterResultsCabecalho">           <i class="icon fa fa-search"></i>           </button></td>
        </tr>
        <tr id="secondLineFilters">
            <td>
                <div class="form-group">
                    <div class="col-md-4">
                        <div class="input-group"> 
                          <select class="form-control selectFilter" name="filterSelect">               
                            <option value=""></option><option value="1">SGICM</option>
                            <option value="2">HIS</option>             
                          </select> 
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <div class="col-md-4">
                        <div class="input-group"> 
                          <select class="form-control selectFilter" name="filterSelect">               
                            <option value=""></option>
                            <option value="3">teste</option>             
                          </select> 
                        </div>
                    </div>
                </div>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

在这张图片中，您可以注意到第二个条目被选中：

我已经尝试过：

$("select[class='form-control selectFilter']:last option:selected").val();

$("select[class='form-control selectFilter']:last option:selected").attr('value');

$("[name='filterSelect']:last").val();

总是得到“”。

如果我尝试：

$("[name='filterSelect']").val();

它将返回“1”

你能帮忙吗？

编辑： 在使用此 HTML 页面在 chrome 控制台上进行测试时，在第一次选择中选择“SGICM”并在第二次选择中选择“teste”后，如果我运行： $("[name='filterSelect']:last").val();

在控制台上，输出将是 ""

EDIT2： 经过一些调试并看到我能够在 jsfiddle 中获得正确的选定值后，得出结论，在注释了一些引导程序和其他使用的模板文件后，选择工作正常。稍后会尝试解决这个问题...

【问题讨论】：

你能创建一个jsfiddle吗？
最好使用.form-control.selectFilter来选择类，而不是使用[class=...]。
你为什么要尝试获取 :last？
您的第一个代码适用于我：jsfiddle.net/barmar/qdo5okvo 当我从第二个菜单中选择 teste 时，它会返回 3。
为什么1 是期望值？最后一个菜单是带有teste 的菜单，因此预期值为3。

标签： jquery html jquery-selectors

【解决方案1】：

$("select[class='form-control selectFilter']:last option:selected").val() 仅当您在 DOM 中的最后一个 <select>（相关类）元素中选择了选项时，语句才会返回定义的值。以下代码有效：

$("select").change(function(){
   alert ($(this).val())
});

如果你想实现一棵树，我认为你需要为每个 select 分配唯一的 id，或者为唯一最后更改的 select 添加特定的类名

$("select[class='form-control selectFilter']").change(function(){
   $("select").removeClass("active_sel");
   $(this).addClass("active_sel");
   alert ($(this).val())
});

然后你可以使用当前选择值：

$("select[class*='active_sel']").val();

【讨论】：

【解决方案2】：

你可以使用选择器：

$('option:nth-of-type(2)').eq(1)

要获取值，您可以使用：

$('option:nth-of-type(2)').eq(1).attr('value')

说明：

您想要第二个select 的第二个option 的值。

选择器option:nth-of-type(2) 表示第二个选项。

选择器option:nth-of-type(2).eq(1) 表示第二个选项，第二次。

【讨论】：

但是如果尝试 $("[name='filterSelect']").val();在 jsfiddle 中它确实有效。
好的，明白你的意思，但它得到了选择的固定值，即使我在其中选择了另一个值
不用担心。我现在知道我误解了你的问题。

【解决方案3】：

实际上解决了这个问题并关联了一个 on change 事件来记录全局变量上的用户选择，因为我无法获得 select:last 。

$(document).on("change","[name='filterSelect']",function(){
	alert($(this).val());
})

【讨论】：