CODEWITHSUNDEEP
javascriptjquery
PositiveGuy
PositiveGuy

Reputation: 47783

Not able to append options to select

I am not sure why this works but not when I pass in numbers

<form id="form1" runat="server">
    <div id="facebookPhotos-iFrameContent">
        <div>
            <p>Log in</p>
            <p id="LoginButtonContainer"><input type="image" id="btnLogin" src="images/loginBtn.jpg" /></p>
            <p><select id="facebookAlbumDropdown" /></p>
            <div id="facebookPhotosContainer" />
        </div>
    </div>
</form>


AddDropdownItem("-Select something test-", "-1", "testDropdown");

function AddDropdownItem(sText, sValue, sDropdownID)
{
      $("#" + sDropdownID).append("<option value=" + sValue + ">" + sText + "</option>");
}

that works

but this does not:

var id = 104388426283811;
AddDropdownItem("-Select something test-", id.toString(), "testDropdown");

What happens is the default option shows up but then when it tries to add the second option it bombs out with no errors that I can see in the firebug console and then in the end the list goes blank (no options) when my code is done running.

Upvotes: 1

Views: 186

Answers (3)

David Hoerster
David Hoerster

Reputation: 28711

Based on the comment thread in the original question, here's my sample page that incorporates your logic (along with wiring up a button to add options to the select):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript"> 
    $(document).ready(function() {
        $("#btnClick").click(function(e) {
            e.preventDefault();
            var id = 104388426283811;
            AddDropdownItem("-Select something test-", id.toString(), "testDropdown");
            //AddDropdownItem("-Select something test-", "-1", "testDropdown");
        });
    });

    function AddDropdownItem(sText, sValue, sDropdownID)
    {
          $("#" + sDropdownID).append("<option value='" + sValue + "'>" + sText + "</option>");
    }
</script>
</head>
<body>

 <input id='btnClick' type='submit' value='click'></input>
<p><select name="MyTestDropdown" id="testDropdown"></select></p>


</body>
</html>

I don't have the iframes that you mentioned, but I'm using an input submit element to add items in. I'm preventing the default behavior of a submit button by calling e.preventDefault();, which then prevents the post back. I'm then able to add items to the select element.

I hope this helps.

Upvotes: 0

Byron Sommardahl
Byron Sommardahl

Reputation: 13012

Try putting the value in single quotes, like this:

function AddDropdownItem(sText, sValue, sDropdownID)
{
      $("#" + sDropdownID).append("<option value='" + sValue + "'>" + sText + "</option>");
}

You asked, "Why would that matter." The answer. It is a good practice and it prevents problems when your values start having spaces in them. I ALWAYS put attribute values in quotes.

Now, for your problem... I just tried it with the following code and it works like a charm!

<p><select name="MyTestDropdown" id="testDropdown"></select></p>

<script type="text/javascript">
    $(document).ready(function () {

        AddDropdownItem("-Select something test-", "-1", "testDropdown");
        AddDropdownItem("something else", "1", "testDropdown");
        AddDropdownItem("another thing", 2, "testDropdown");

        var id = 104388426283811;
        AddDropdownItem("test big value", id.toString(), "testDropdown");

        AddDropdownItem("Profile Pictures", 100001379631246, "testDropdown");

        AddDropdownItem("Test Test2", 104388426283811, "testDropdown");

    });
    function AddDropdownItem(sText, sValue, sDropdownID)
    {
        $("#" + sDropdownID).append("<option value='" + sValue + "'>" + sText + "</option>");
    }
</script>

Your original code actually works, too. I don't think there was a problem with it. :) Maybe you have a problem elsewhere in your code?

Upvotes: 1

Jacob Relkin
Jacob Relkin

Reputation: 163308

JavaScript will interpret integers as strings where needed, there is no need to use toString().

Upvotes: 2

Related Questions