我有一个包含多个字段的多步骤注册表单。与该问题相关的是询问用户所在国家，是否被雇用/获得稳定薪水，是否愿意分期或预付服务费的字段。
[如果用户将国家/地区选择为尼日利亚，表示他们已受雇并且希望分期支付服务，我想显示一个弹出页面。
因此，在将尼日利亚选择为国家并表明他们已被雇用之后，当该人选择是要分期付款时，就会出现弹出表格。
这是我的html以及我尝试过的内容：
<div class="row"> {% if form.errors %} <div class="alert alert-error"> <ul> {% for error in form.non_field_errors %} <li>{{ error }}</li> {% endfor %} </ul> </div> {% endif %} </div> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!-- --> <form id="msform" method="post" action="" > {% csrf_token %} <input type="hidden" name="next" value="{{ next }}" class="form-control"> <ul id="progressbar"> <li>More about you</li> <li>Contact Details</li> </ul> <fieldset> <h2 class="fs-title">More about you</h2> {{form.city}} <br> <select name='country' required class="form-control my-2"> <option value="" disabled selected hidden>Country</option> {% for value, name in form.fields.country.choices %} <option value="{{value}}">{{name}}</option> {% endfor %} </select> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2 class="fs-title">Contact Details</h2> <select name='installments' required class="form-control my-2"> <option value="" disabled selected hidden>Would you like to pay the $350 fee upfront or in installments?</option> {% for value, name in form.fields.installments.choices %} <option value="{{value}}">{{name}}</option> {% endfor %} </select> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /> <input type="submit" class="submit action-button" value="Sign Up" /> </fieldset> </form> </div> </div> {% endblock %} {% block mainjs %} {% endblock mainjs %} {% block extrajs %} <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> <script > //jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches $(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0. ; //2. bring next_fs from the right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({ 'transform': 'scale('+scale+')', 'position': 'absolute' }); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); previous_fs.show(); current_fs.animate({opacity: 0}, { step: function(now, mx) { scale = 0.8 + (1 - now) * 0.2; left = ((1-now) * 50)+"%"; opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, easing: 'easeInOutBack' }); }); $(".submit").click(function(){ return true; }) </script> <script> $("#installments").bind("change", function() { var value = this.value; switch (value) { case "installments": window.open("https://www.google.com/", "Google"); break; } }); </script> {% endblock extrajs %}为了澄清这是我试图用来打开弹出窗口的代码：
<script> $("#installments").bind("change", function() { var value = this.value; switch (value) { case "installments": window.open("https://www.google.com/", "Google"); break; } }); </script>这些是forms.py中的选择选项：
employed_choices = ( ('yes', 'Yes'), ('no', 'No'), ) installment_choices = ( ('upfront', 'Upfront'), ('installments', 'Installments'), ) country_choices = ( ('kenya', 'Kenya'), ('nigeria', 'Nigeria'), ('south africa', 'South Africa'), )只是再澄清一次这个问题。如果用户的选择满足以下条件，我想打开一个弹出窗口：i。）用户已选择尼日利亚作为国家/地区选择ii。）用户是否选择了“是”和iii。）如果用户最终选择分期付款进行分期付款选择]
我有一个包含多个字段的多步骤注册表单。与该问题相关的是询问用户所在国家/地区，是否雇用/获得稳定薪水以及是否愿意支付的字段...
在您的HTML中，缺少用户可以在“是”和“否”之间进行选择的部分。假设有两个名为“ employed”的单选按钮，其工作原理如下（只需将代码中的“ employed”更改为您使用的名称）：