JQuery mobile, вмешивающийся в javascript fill select box

Question

Я пытаюсь заполнить поле выбора html программно, используя javascript. Я обнаружил, что хотя мой код работает, jquery mobile мешает отображению в окне выбора. Я устанавливаю выбранную опцию, которая работает, но значение, отображаемое в поле выбора, является неправильным значением. Он не меняется от того, что я изначально заполнял, как из html.

Я связываюсь в: "http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css". Нужно ли обойти jquery? Я не могу просто удалить jquery css. Это сломает все на моем сайте, и у меня нет времени переделать все это.

Вот jsfiddle проблемы: http://jsfiddle.net/RjXRB/1/

Вот мой код для справки:

Вот мой Javascript функция, которая заполняет поле выбора:

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); 
    } 

} 

Вот мой 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> 

Любая помощь будет значительно повышена лем, связанных.

Answer 1

Я знаю, что этот вопрос составляет около месяца, но я наткнулся на него, потому что у меня была такая же проблема. Я в конце концов исправил это, выполнив следующие действия:

После программной настройки значения я вручную произвел событие изменения в этом поле выбора. Я предполагаю, что это вынудило jQuery mobile обновить всю улучшенную разметку, связанную с этим элементом. Немного раздражает, но, к счастью, очень легко обойти.

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

Надежда, которая помогает кому-то.