合併2個jquery函數來更新兩個單獨的DIV

我希望選擇下拉框同時運行兩個函數，以便在同一頁上更新兩個獨立的div。合併2個jquery函數來更新兩個單獨的DIV

這裏是我的功能;

function showFAQ(str) { 
    if (str=="") { 
    document.getElementById("faqHint").innerHTML=""; 
    return; 
    } 
    if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
     document.getElementById("faqHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
    var category = "<?php echo $category; ?>"; 
    var catid = "<?php echo $catid; ?>"; 
    var subcat = "<?php echo $subcat; ?>"; 
    var subcat2 = "<?php echo $subcat2; ?>"; 
    var subcatid= "<?php echo $subcatid; ?>"; 
    var fileclass= "<?php echo $fileclass; ?>"; 
    xmlhttp.open("GET","FaqCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true); 
    xmlhttp.send(); 
} 
function showClass(str) { 
    if (str=="") { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
    if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
    var category = "<?php echo $category; ?>"; 
    var catid = "<?php echo $catid; ?>"; 
    var subcat = "<?php echo $subcat; ?>"; 
    var subcat2 = "<?php echo $subcat2; ?>"; 
    var subcatid= "<?php echo $subcatid; ?>"; 
    var fileclass= "<?php echo $fileclass; ?>"; 
    xmlhttp.open("GET","FileCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true); 
    xmlhttp.send(); 
}

此刻我不得不使用兩個下拉框來實現，但我希望它更整潔。選擇代碼是; 1.

<select name="fileclass" onchange="showClass(this.value)" required=""> 
<option value="">Select</option> 
<option value="create">Create</option> 
<option value="modify">Modify</option> 
<option value="delete">Delete</option> 
</select>

<select name="faq_class" onchange="showFAQ(this.value)" required=""> 
<option value="">Select</option> 
<option value="create">Create</option> 
<option value="modify">Modify</option> 
<option value="delete">Delete</option> 
</select>

信息，faq_class和fileclass共享相同的值（永遠！）

謝謝你幫助一個新手:)

來源

2014-07-10 John D

我不在你的代碼中看不到你的下拉列表。但是，您只需運行2個單獨的異步ajax請求即可從服務器獲取所需的數據並更新2個div。 – Dola

除了這個問題，我強烈建議使用'。.get（）'，因爲你已經在使用jQuery，它會減少所需的代碼量並使其更具可讀性。 – UweB

@Dola只是添加了選擇框（美味） –

嘗試在這兩個函數中執行以下操作。初始化XMLHTTP可變

var xmlhttp=new XMLHttpRequest();

這是使變量的範圍是僅含有其功能時我已經添加了關鍵字var。如果初始化變量而沒有使用var關鍵字，則該變量將被附加到window對象，並將在全局中看到。

編輯：編輯代碼，以顯示完整的代碼

function showFAQ(str) { 
    if (str=="") { 
    document.getElementById("faqHint").innerHTML=""; 
    return; 
    } 
    if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    //used the keyword var before initializing xmlhttp variable 
    var xmlhttp=new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
     document.getElementById("faqHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
    var category = "<?php echo $category; ?>"; 
    var catid = "<?php echo $catid; ?>"; 
    var subcat = "<?php echo $subcat; ?>"; 
    var subcat2 = "<?php echo $subcat2; ?>"; 
    var subcatid= "<?php echo $subcatid; ?>"; 
    var fileclass= "<?php echo $fileclass; ?>"; 
    xmlhttp.open("GET","FaqCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true); 
    xmlhttp.send(); 
} 
function showClass(str) { 
    if (str=="") { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
    if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    //used the keyword var before initializing xmlhttp variable 
    var xmlhttp=new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
    var category = "<?php echo $category; ?>"; 
    var catid = "<?php echo $catid; ?>"; 
    var subcat = "<?php echo $subcat; ?>"; 
    var subcat2 = "<?php echo $subcat2; ?>"; 
    var subcatid= "<?php echo $subcatid; ?>"; 
    var fileclass= "<?php echo $fileclass; ?>"; 
    xmlhttp.open("GET","FileCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true); 
    xmlhttp.send(); 
}

現在你可以在onchange事件只是一個下拉列表中這樣調用這兩個函數：

onchange="showClass(this.value); showFAQ(this.value);"

來源

2014-07-10 14:38:51 Dola

是否有可能向我展示我的現有代碼集成請，我有點丟失 –

@JohnD我已經添加完整的代碼。請檢查它，並讓我知道如果它仍然不工作 – Dola

王牌，工作一種享受。：D（我會很樂意爲你投票，但我只有8代表）也許這個問題的投票，如果你認爲它是好的:)和非常感謝 –

合併2個jquery函數來更新兩個單獨的DIV

回答

相關問題