选择字段控制字符限制

Question

Does anyone know how to allow this character countdown to be controlled by pre-determined variables that are linked to the select field options?

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

I appreciate any input greatly.

Example Code:

<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>

Answer 1

You can achieve this by firstly changing the options of the select element to have a value equal to the length required by that type of product:

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

From there you can retrieve the selected value (converting it to a number) before subtracting the number of used characters. Also note that you would also now need to update the count on the change event of the #product field. Try this:

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);

Example fiddle