选择“字段控制字符限制” - Select Field controlling Character Limit

Select Field controlling Character Limit

本文关键字：控制字符字段选择 | 更新日期: 2023-09-27

有人知道如何让这个字符倒计时由链接到选择字段选项的预先确定的变量控制吗？

var large = 300
var medium = 200
var small = 100

我非常感谢任何意见。

示例代码：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function updateCountdown() {
    var remaining = 50 - jQuery('#post').val().length;
    jQuery('#character_limit').text(remaining + ' characters remaining.');
}
jQuery(document).ready(function($) {
    updateCountdown();
    $('#post').change(updateCountdown);
    $('#post').keyup(updateCountdown);
});
</script>
<textarea id="post" cols="40" rows="3" maxlength="500"></textarea>
<div id="character_limit"></div>
<select name="product" id="product">
<option value="large">Large Product</option>
<option value="medium">Medium Product</option>
<option value="small">Small Product</option>
</select>

您可以通过首先更改select元素的选项来实现这一点，使其值等于该类型产品所需的长度：

<select name="product" id="product">
    <option value="300">Large Product</option>
    <option value="200">Medium Product</option>
    <option value="100">Small Product</option>
</select>

在减去使用的字符数之前，您可以从中检索选定的值（将其转换为数字）。还要注意，您现在还需要更新#product字段的change事件的计数。试试这个：

function updateCountdown() {
    var charLimit = parseInt($product.val(), 10)
    var remaining = charLimit - jQuery('#post').val().length;
    jQuery('#character_limit').text(remaining + ' characters remaining.');
}
var $product = $('#product');
updateCountdown();
$('#post, #product').change(updateCountdown);
$('#post').keyup(updateCountdown);

小提琴示例