Jquery mobile interfering with javascript filling select box

Question

I am trying to fill an html select box programmatically using javascript. I have found that although my code is working, jquery mobile is interfering with what displays in the select box. I am setting the selected option, which is working, but the value displayed in the select box is the wrong value. It isn't changing from what I had it originally filled as from the html.

I am linking in: " http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css ". Is there anyway to get around the jquery? I can't just remove the jquery css. That would break everything on my site, and I don't have time to redo it all.

Here is a jsfiddle of the problem: http://jsfiddle.net/RjXRB/1/

Here is the my code for reference:

Here is my javascript function that fills the select box:

function printCartList(newCart){
    // newCart is an optional parameter. Check to see if it is given.
    newCart = newCart ? newCart : "a_new_cart_was_not_provided_12345abcde";

    // Create a cart list from the stored cookie if it exists, otherwise create a new one.
    if($.cookie("carts") != null){
        carts = JSON.parse($.cookie("carts"));
    }
    else{
        selectOption = new Object();
        selectOption.value = "newuniquecartid12345abcde";
        selectOption.html = "***New Cart***";
        carts = new Object();
        carts.size = 1;
        carts.option = new Array();
        carts.option[0] = selectOption;
    }

    // Get the select box
    var select = document.getElementById("select_cart");

    // Get the number of options in the select box.
    var length = select.options.length;

    // Remove all of the options in the select box.
    while(select.options.length > 0){
        select.remove(0);
    }


    // If there is a new cart, add it to the cart.
    if(newCart != "a_new_cart_was_not_provided_12345abcde"){
        selectOption = new Object();
        selectOption.value = newCart;
        selectOption.html = newCart;
        carts.option[carts.size] = selectOption;
        carts.size++;
    }
    // Save the cart in a cookie
    $.cookie("carts",JSON.stringify(carts));

    // Populate the select box
    for(var i = 0; i < carts.size; i++){
        var opt = document.createElement('option');
        opt.value = carts.option[i].value;
        opt.innerHTML = carts.option[i].html;
        if($.cookie("activeCart") == carts.option[i].value && newCart != "a_new_cart_was_not_provided_12345abcde"){
            // Set the selected value
            alert(carts.option[i].value);
            opt.selected = true;
            // I tried changing the value of a p tag inside the default option, but that didn't work
            document.getElementById("selectHTML").innerHTML = carts.option[i].html;
        }
        if(opt.value == "dd"){alert("hi");};
        select.appendChild(opt);
    }   

}

Here is my html:

<form method="POST" name="cartSelectForm" action="home.php">
    <select name="cartList" id="select_cart" data-mini="true" onchange="submitCartForm()" data-icon="false">
        <option value="newuniquecartid1234567890"><p id="selectHTML">*** New Cart ***</p></option>
    </select>
</form>

Any help would be greatly appreciated.

Answer 1

I know this question is about a month old, but I stumbled upon it because I was having the exact same issue. I eventually fixed it by doing this:

After programmatically setting the value, I manually fired the change event on that select box. I guess it forced jQuery mobile to update all of it's enhanced markup related to that element. Slightly annoying, but fortunately very easy to work around.

$("#country").val("US");
$("#country").change();

Hope that helps somebody.