jquery最后选择选择器值

时间:2016-12-16 23:00:26

标签: jquery html jquery-selectors

我一直试图让我的第二个选择"被选中"价值,但总是让我回归""。其实我在第二个选择中选择了第二个选项。它似乎继续给我第一个选项而不是实际选择的选项。

这是显示的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>

在此图像中,您可以注意到第二个条目已被选中:

Selected Values

我已经尝试过:

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

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

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

总是得到&#34;&#34;。

如果我尝试:

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

它将归还我&#34; 1&#34; &lt; - 期望值。

你能帮帮忙吗?

修改 使用此HTML页面在Chrome控制台上进行测试并选择&#34; SGICM&#34;在第一个选择和&#34; teste&#34;在第二个选择,如果我运行: $(&#34; [名称=&#39; filterSelect&#39]:最后&#34)。VAL();

在控制台上

,输出将是&#34;&#34;

EDIT2: 经过一些调试,看到我能够在jsfiddle中获得正确的选择值,得出的结论是,在评论了一些引导程序和其他模板文件后,选择工作正常。稍后会试着这个......

3 个答案:

答案 0 :(得分:0)

$("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();

答案 1 :(得分:0)

您可以使用选择器:

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

要获得该值,您可以使用:

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

<强>解释

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

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

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

答案 2 :(得分:0)

实际上解决了这个问题,并在更改事件上进行了联系,以便在全局变量上记录用户选择,因为我无法获得select:last。

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