why is this delivering empty list items?

Question

I've gotten some help here for this piece of code, but on my end, when I click the button, it's simply dumping empty li elements to the intended target.

<script type="text/javascript">
    $('.add-button').click(function() {
        $('<li />', {text: $('#select-put:selected').text() })
        .appendTo('#publisher-results ul');
    });
</script>

<div class="select-div">
    <select id="select-put">
        <option val="1">Tester out </option>
        <option val="2">Tester out 2</option>
        <option val="3">Tester out 3</option>
        <option val="4">Tester out 4</option>
    </select>
</div>

<div class="link-div">
    <a class="add-button" href="#" style="width:46px;height:22px;display:block;"></a>
</div>

<div style="clear:both;"></div>
<div id="publisher-results">
    <ul></ul>
</div>

I have this operating in a modal window...perhaps that has something to do with why it isn't working. The modal window can be engaged here....I'd appreciate any help...thank you.

Answer 1

I believe it should be:

$('<li />')
    .text($('#select-put :selected').text())
    .appendTo('#publisher-results ul');

Edit I've just realised that your original should work -- this just isn't jQuery syntax I've seen before. I think the problem may be that you aren't waiting for the DOM to be ready. You should use the following syntax to make sure your code is only run when the DOM is fully loaded:

$(document).ready(function() {
    $('.add-button').click(function() {
        $('<li />', {text: $('#select-put :selected').text() })
        .appendTo('#publisher-results ul');
    });
});