[英]Jquery mobile interfering with javascript filling select box
我正在嘗試使用javascript以編程方式填充html選擇框。 我發現盡管我的代碼可以正常工作,但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>
任何幫助將不勝感激。
我知道這個問題大約有一個月了,但是我偶然發現了這個問題,因為我遇到了完全相同的問題。 我最終通過執行以下操作修復了該問題:
通過編程設置該值后,我在該選擇框中手動觸發了更改事件。 我猜想它迫使jQuery mobile更新與該元素相關的所有增強標記。 有點煩人,但幸運的是很容易解決。
$("#country").val("US");
$("#country").change();
希望能幫助到別人。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.