單個FancyBox窗體與多個鏈接

我想弄清楚有多個鏈接和1彈出FancyBox窗體的方法。當用戶點擊其中一個國家時，我希望在我的下拉菜單中選擇該國家/地區。除非我無法弄清楚如何選擇下拉列表中的值，否則一切都很好。誰能幫我這個？先謝謝你：）。單個FancyBox窗體與多個鏈接

<script type="text/javascript"> 
jQuery(document).ready(function() { 

$("a.country-form").fancybox({ 
     'scrolling' : 'no', 
       'titleShow' : false, 
       'onClosed' : function() { 
      $("#country_error").hide(); 
     }  
    }); 

    $("#country_form").bind("submit", function() { 

     if ($("#country_country").val() == 0) { 
      $("#country_error").show(); 
      $.fancybox.resize(); 
      return false; 
     } 

     $.fancybox.showActivity(); 

     $.ajax({ 
      type : "POST", 
      cache : false, 
      url  : "process.php", 
      data : $("#country_form").serializeArray(), 
      success: function(data) { 
       $.fancybox(data); 
      } 
     }); 

     return false; 
    }); 
} 
</script> 

<a class="country-form" href="#country_form" >Submit textbook (Canada)</a> 
<a class="country-form" href="#country_form" >Submit textbook (United States)</a> 
<a class="country-form" href="#country_form" >Submit textbook (United Kingdom)</a> 

<div style="display:none"> 
<form id="country_form" name="country_form" method="post" action=""> 
<p id="country_error">* There was a problem with your submission.</p> 
<h1>Submit textbook in (COUNTRY HERE)</h1> 
<label for="country">Country: </label> 
<select name="country" id="country_country"> 
<option value="0">Country...</option> 
<option value=1>Canada</option> 
<option value=2>United States</option> 
<option value=3>United Kingdom</option> 
</div>

來源

2012-04-17 Alex

組rel屬性的鏈接

<a class="country-form" rel='1' href="#country_form" >Submit textbook (Canada)</a> 
<a class="country-form" rel='2' href="#country_form" >Submit textbook (United States)</a> 
<a class="country-form" rel='3' href="#country_form" >Submit textbook (United Kingdom)</a>

然後嘗試

$("a.country-form").fancybox({ 
     'scrolling' : 'no', 
     'onStart' : function(){ 
       $("#country_country").val($(this).attr('rel')); 
      }, 
       'titleShow' : false, 
       'onClosed' : function() { 
      $("#country_error").hide(); 
     }  
    });

來源

2012-04-17 03:01:04 crazyphoton

沒錯。你打敗了我，@crazyphoton。你也可以使用'id'而不是'rel'。我還會將選擇下拉值更改爲有意義的值，如'ca'，'us'和'uk'，而不是1,2和3. – 2012-04-17 03:15:30

是的，id也可以正常工作！但是，將id設置爲1,2和3是一個壞主意。因此，它應該是id =「country-form-link-1」，id =「country-form-link-2」等。你必須解析它得到1,2和3. rel似乎更簡單:)並且是的，除非數據庫使用數字作爲外鍵，否則我們可能會更容易。 – crazyphoton 2012-04-17 03:39:56

所有優點，@crazyphoton。還有另一種選擇，這可能比這些想法更好：使用jQuery.data。當然，這將涉及在三個錨上設置適當數據的額外步驟，但這實際上可能是一件好事。無論如何，好的解決方案！ – 2012-04-17 05:32:26

單個FancyBox窗體與多個鏈接

回答

相關問題