CODEWITHSUNDEEP
jqueryjquery-uijquery-mobile
user2805663
user2805663

Reputation:

get current value of select option

    <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

Answers (3)

Alvin
Alvin

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

Arun P Johny
Arun P Johny

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

Christian Ternus
Christian Ternus

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

Related Questions