Javascript更改选择框中的选定值无法正常工作

我使用javascript以编程方式向html选择框添加选项。添加新选项时，我会将该选项的.selected属性设置为true，以便该属性显示在选择框中。当我这样做时，innerHTML不会更改为新值，但是当我在选择框中单击时，我看到我想要选择的选项旁边有一个复选标记，指示它已被选中。为什么显示的值不是正确的值

以下是填充选择框选项的函数：

function printCartList(newCart){
    // Check if newCart is null
    newCart = newCart ? newCart : "a_new_cart_was_not_provided_12345abcde";

    // set carts object from 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 element
    var select = document.getElementById("select_cart");

    // Get the length of the select options list
    var length = select.options.length;

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

    // If newCart was provided, create a new option and 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));

    // Add the options to 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){
            // Set the option to true if the cart is the active cart.
//*****I have tested this with an alert box showing the value of carts.option[i].value    This is being called for the correct option*******
            opt.selected = true;
        }
        select.appendChild(opt);
    }   
}

正在将新项目添加到选择框中，并且在查看选择框中的所有项目时，新项目旁边确实有一个复选标记，只是在选择框中没有显示正确的值

这是我的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">*** New Cart ***</option>
    </select>
</form>

编辑

我发现jquery css干扰了javascript填充选择框的内部HTML。我正在链接：。还有什么可以绕过jquery的吗？我不能仅仅删除jquery css。这会破坏我网站上的一切，我没有时间全部重做

---

这里是一个问题的中间部分：

在创建选择框时最好使用角度方式-请看这里：

---

如果你有一个使用InEnHTML方法的理由，你应该考虑使用Switc.Apple或Simult.CaseEclipse描述.< /P>来激励人们提供解决方案，试图找到最小的代码来复制这个问题，并尝试在一个或类似的东西中创建一个工作示例。我想一定是上述代码之外的其他东西导致了这个问题。虽然我不知道在哪里。所以我发现我在jQueryCSS中链接。这会干扰正在显示的选择框的innerHTML。有没有办法绕过jquery？为什么这样更好？因为在angular和外部世界之间没有DOM同步问题

  <select ng-model="color" ng-options="c.name group by c.shade for c in colors">
  </select>