的jQuery/AJAX的幫助需要

Question

我有下面的鏈接

<div id='list1'> 
<a href='#1'>USA</a> 
<a href='#2'>Canada</a> 
<a href='#3'>France</a> 
</div> 

<div id='list2'> 
<a href='#1'>Cars</a> 
<a href='#2'>Houses</a> 
<a href='#3'>Machines</a> 
</div> 

我想要做的是當美國用戶點擊它，然後（同時，美國的鏈接）得到大膽的名單。然後用戶點擊列表2中的任何元素。單擊兩個鏈接後，鏈接1和鏈接2中所選元素的值將傳遞給ajax函數。任何人都可以告訴我這件事。

Answer 1

我沒有檢查它，但你可以使用水木清華這樣的：

<div id='list1'> 
<a href='#1'>USA</a> 
<a href='#2'>Canada</a> 
<a href='#3'>France</a> 
</div> 

<div id='list2'> 
<a href='#1'>Cars</a> 
<a href='#2'>Houses</a> 
<a href='#3'>Machines</a> 
</div> 

<script> 
    $(document).ready(function(){ 
      $('#list1 > a').click(function(){ 
       $('#list1 > a').attr('class', ''); 
       $(this).attr('class','selected'); 

       if ($('#list2 > a.selected').length > 0) 
       { 
        $.post('post/submit/url', {'link1':$(this).attr("href"), 'link2':$('#list2 > a.selected').attr("href")}, function(data){ 
          alert(data); 
        }); 
       } 
      }); 

      $('#list2 > a').click(function(){ 
       $('#list2 > a').attr('class', ''); 
       $(this).attr('class','selected'); 

       if ($('#list1 > a.selected').length > 0) 
       { 
        $.post('post/submit/url', {'link1':$('#list1 > a.selected').attr("href"), 'link2':$(this).attr("href")}, function(data){ 
          alert(data); 
        }); 
       } 
      }); 
    }); 
</script> 

Answer 2

做這樣的事情： 用於存儲所選國家的值創建一個隱藏的輸入元素，

 

$("#list1 a").click(function(e) { 
    e.preventDefault(); 
    $(this).addClass("blodAnchor");// may be font-weight bold in this class 
    $("#selectedCountry").val(''); 
    $("#selectedCountry").val($(this).text()); 
}); 

//then 
$("#list2 a").click(function(e) { 
    e.preventDefault(); 
    var selectedVal = $(this).text() || ""; 
    var selectedCountry = $("#selectedCountry").val() || ""; 
    if(selectedCountry != "" && selectedVal != "") { 
    $.ajax({ 
     type: "POST", 
     data: {country: selectedCountry, someVal : selectedVal}, 
     url: ".....", 
     success: function(resp) { 
      ........ 
     } 
    }); 
    } 
});