单个FancyBox表单,带有多个链接

时间:2012-04-17 02:44:01

标签: php jquery 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>

1 个答案:

答案 0 :(得分:2)

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