如何在 Javascript 中获取 .val() 的最后一个字符
How to get last character of .val() in Javascript
我想根据 selected 选项为我的 select 元素应用不同的背景颜色。
我有这段代码要应用到我的案例中:
$('select').on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});
问题是,就我而言,我不想要 selected 选项的完整值。但只有 .val()
返回值的最后一个字符
我试过了
$(this).attr('class', '').addClass($(this).children(':selected').val().id.slice(-1));
但是不行
我从这个 Example 中获取了这段代码
这也可以按我的意愿工作,但在我的例子中,每个选项的选项值都不同,而且我有数百个 select 和选项。
采用这种格式:
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>
问题是您正在 undefined
上应用 slice
。 .val().id
是 undefined
.
在你的 html
中,你不应该最后 char.Its 而不是最后。使用这个
$('select').on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val().split('.')[1].trim().slice(-1));
});
您可以使用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>
试试 val().pop();应该 return 最后一个元素。
我想根据 selected 选项为我的 select 元素应用不同的背景颜色。
我有这段代码要应用到我的案例中:
$('select').on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});
问题是,就我而言,我不想要 selected 选项的完整值。但只有 .val()
返回值的最后一个字符我试过了
$(this).attr('class', '').addClass($(this).children(':selected').val().id.slice(-1));
但是不行
我从这个 Example 中获取了这段代码 这也可以按我的意愿工作,但在我的例子中,每个选项的选项值都不同,而且我有数百个 select 和选项。 采用这种格式:
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>
问题是您正在 undefined
上应用 slice
。 .val().id
是 undefined
.
在你的 html
中,你不应该最后 char.Its 而不是最后。使用这个
$('select').on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val().split('.')[1].trim().slice(-1));
});
您可以使用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>
试试 val().pop();应该 return 最后一个元素。