jQuery 选择器-> 如何获取使用“id 开始/结束于”选择的字段的值？

Question

我正在尝试获取选择字段的值，但 .val() 似乎不起作用。

我通过使用开始和结束来获取选择字段。

s_day = $("select[id ^='form-widgets'][id $='start-day']")

我打开一个表单，它找到了一个字段：

if(s_day.length > 0){
    console.log(s_day[0]);
}

console.log 输出

<select class="day date-widget required date-field" name="form.widgets.entry_start-day" id="form-widgets-entry_start-day">

当我尝试时：

console.log(s_day[0].val())

我明白了：

s_day[0].val is not  a function

当我尝试手动输入返回字段的 ID 时：

s_day = $("#form-widgets-IEventBasic-start-day");
console.log(s_day.val());

它返回月份中的日期（作为整数）。

如何通过我使用的方法获取选择框的val？

我尝试这样做是有原因的。某些表单具有与开始/结束字段的“接口”，字段 ID 匹配模式 select[id ^='form-widgets'][id $='start-day'] 还有-month，-year等。 我想针对那些改变他们的默认值。

我现在能做的事情是：

s_day = $('select[id ^="form-widgets"][id $="start-day"]');
if(s_day.length > 0){
    console.log($("#"+s_day[0].id).val());
}

这也会正确返回月份中的某天。

但我不确定我是否应该这样做。

Answer 1

通过索引访问 jQuery 对象会返回底层 DOM 元素，因此会出现“val is not a function”错误。

如果要检索第一个找到的元素，请使用first() 或:first，如下所示：

var s_day = $('select[id^="form-widgets"][id$="start-day"]:first').val();

console.log(s_day);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select class="day date-widget required date-field" name="form.widgets.entry_start-day" id="form-widgets-entry_start-day">
  <option value="foo">Foo</option>
</select>