如何在 Javascript 中获取 .val() 的最后一个字符

Question

我想根据所选选项为我的选择元素应用不同的背景颜色。

我想将这段代码应用到我的案例中：

$('select').on('change', function(ev) {
    $(this).attr('class', '').addClass($(this).children(':selected').val());
});

问题是，在我的情况下，我不想要所选选项的完整值。但只有.val()返回的值的最后一个字符

我试过了

$(this).attr('class', '').addClass($(this).children(':selected').val().id.slice(-1));

但它不起作用

我从Example 中获取了此代码 这也可以按我的意愿工作，但在我的情况下，每个选项的选项值都不同，我有数百个选择和选项。 采用这种格式：

Name - Date - 1 Letter Variable

所以我有这样的 CSS：

select, option { background: #fff; }
select.P, option[value$='P'] { background: yellow; }
select.O, option[value$='O'] { background: lightblue; }
select.A, option[value$='A'] { background: lightgreen; }
select.R, option[value$='R'] { background: salmon; }

还有一个select的例子：

<select onchange='myFunction()' id='" . $i . "' name='" . $i . "' style='width: 80px;'>
        <option value='' style='background:white' style='width: 80px;'></option>
        <option value='" . $vacationIdP . "' style='background:yellow' style='width: 80px;'>P</option>
        <option value='" . $vacationIdO . "' style='background:lightblue' style='width: 80px;'>O</option>
        <option value='" . $vacationIdA . "' style='background:lightgreen' style='width: 80px;'>A</option>
        <option value='" . $vacationIdR . "' style='background:salmon' style='width: 80px;'>R</option>
</select>

Answer 1

问题是您在undefined 上应用slice。 .val().id 是 undefined。
在您的html 中，您不应该得到最后一个字符。它不是最后一个。使用这个

$('select').on('change', function(ev) {
    $(this).attr('class', '').addClass($(this).children(':selected').val().split('.')[1].trim().slice(-1));
});

JS Fiddle

Answer 2

您可以使用chartAt

$('select').on('change', function(ev) {
  let k = $(this).children(':selected').val();
  console.log(k.charAt(k.length - 1))
  //$(this).attr('class', '').addClass($(this).children(':selected').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value='abc'> ABC</option>
  <option value='def'>DEF</option>
  <option value='ghi'> GHI</option>
</select>

Answer 3

试试 val().pop();应该返回最后一个元素。