Reputation:
<script type="text/javascript">
$(document).ready(function(){
$('#number').change(function(){
$("#number option:selected").text();
//alert('Value change to ' + $(this).attr('value'));
$('#numberdiv').html('You selected: ' + $(this).attr('value'));
});
});
</script>
<select id="number" data-corners="false" data-icon="false">
<option value="9 ">9 </option>
<option value="18 ">18 </option>
<option value="27 ">27 </option>
<option value="36 ">36 </option>
<option value="54 ">54 </option>
</select>
<div id="numberdiv"></div>
this is working fine but what i cant do is to display the current value which is 9 it can display the vlaue of 9 after you change to other value and them change back to 9 what i want is when i load the "You selected: 9" will display even if i dont make a change in the select
Upvotes: 1
Views: 403
Reputation: 95
Because the function you created inside the document.ready is capturing only the selected change function.
try adding
$('#numberdiv').html('You selected: ' + $(this).attr('value'));
outside of
$('#number').change(function(){
$("#number option:selected").text();
//alert('Value change to ' + $(this).attr('value'));
$('#numberdiv').html('You selected: ' + $(this).attr('value'));
});
Upvotes: 0
Reputation: 388446
You need to manually trigger the change event after the handler is registered using .trigge('change') or the shortcut .change()
$(document).ready(function () {
$('#number').change(function () {
$('#numberdiv').html('You selected: ' + this.value);
}).change();
});
Demo: Fiddle
Upvotes: 3
Reputation: 8490
Try pulling the change function out and running it once on startup, like so:
$(document).ready(function () {
var numberChange = function () {
$("#number option:selected").text();
//alert('Value change to ' + $(this).attr('value'));
$('#numberdiv').html('You selected: ' + $(this).attr('value'));
});
$('#number').change(numberChange);
numberChange();
});
Upvotes: 0