jsfidder here http://jsfiddle.net/a3LwW/4/
My problem is I have multiple spaces in the content of <option>
jQuery val()
gives me correct value, but browser renders the <option>
as if there is only a single space in the string.
Is there a way to to render multiple spaces correctly in <option>
??
I tried <option><pre>three spaces</pre></option>
, but it doesn't do what I want.
HTML
<select id="list">
<option>one space</option>
<option>two spaces</option>
<option>three spaces</option>
</select>
<p>Current Value:<pre id="val"></pre></p>
JS
function update_val () {
$('#val').text($('#list').val());
}
$('#list').change(update_val);
//init
update_val();
If you type five spaces inside <pre> tags, you get five spaces on the website. character. The character creates a space that does not break into a new line. Two words that are separated by a non-breaking space always appear on the same line.
For vertical padding you can use line-height. If you don't need border, you can specify border and make it the same color as the select element background, it will give you padding appearance. box-shadow can be used to add stroke to the element if really needed.
The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
Use
(normally you shouldn't use this for spacing, but you don't have many more options in <select>
elements):
<select id="list">
<option>one space</option>
<option>two spaces</option>
<option>three spaces</option>
</select>
Updated Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With