Question

我正在使用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填充选择框的innerHTML。我正在链接：“http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css”。反正有没有绕过jquery？我不能只删除jquery css。这会破坏我网站上的所有内容，而我没有时间重做所有内容。

以下是问题的解答：http://jsfiddle.net/RjXRB/1/

Answer 1

最好在创建选择框时使用角度方式 - 请在此处查看：http://docs.angularjs.org/api/ng.directive:select

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

如果您有理由使用innerHtml方法，则应考虑使用in the docs所述的Scope.apply或Scope.$digest。

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

1 个答案: