如果用户在下拉菜单中选择一系列选项，则显示弹出窗口

Question

我有一个包含多个字段的多步骤注册表单。与此问题相关的是询问用户所在国家/地区的字段，他们是否受雇/获得稳定的薪水，以及他们是否愿意分期付款或预付服务费。

我想在用户选择国家为尼日利亚的情况下显示一个弹出页面，表明他们有工作并且他们想分期支付服务费用。

因此，在选择尼日利亚作为国家并表明他们受雇后，当该人选择“是”以希望分期付款时，就会出现弹出表单。

这是我的 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.) 如果用户最终选择了分期付款来选择分期付款

Answer 1

在您的 HTML 中，缺少用户可以在“是”和“否”之间选择就业的部分。假设有 2 个名为“受雇”的单选按钮，则以下工作（只需将代码中的“受雇”更改为您使用的任何名称）：

 $(document).ready(function() {
    $("input[name='employed'], select[name='country'], select[name='installments']").on("change", function() {
       let employed = $("input[name='employed']").val();
       let country = $("select[name='country']").val();
       let installment = $("select[name='installments']").val();
       if (employed == "yes" && country == "nigeria" && installment == "installments") {
          window.open("https://www.google.com/", "Google");
       }
    });
 });