Question

我的网站上有预订表格，如果我选择10个以上的人，则展位的表格选项会消失，因为他们最多只能容纳9人。这一切都有效，这是我的脚本：

$(document).ready(function(){
$('#form1_people').on('change',function(){
    if( $(this).val()==="10+ People"){
    $("#tenplus").hide()
        $("#booth-notice").show()
    }
    else{
    $("#tenplus").show()
        $("#booth-notice").hide()
        }
    });
});

我的问题是在主页上我有一个快速预订表单，当用户填写它并自动更新大表单时。但是，如果我从主页中选择10个以上的人，JavaScript就不会执行。

我以为我需要在每个页面上都有这个JavaScript？我试过这个，但它不起作用。我没有想法。任何人吗？

由于

UPDATE !!!!

                <div>
            <label for="form1_people">How many people:</label>
                <select id="form1_people" name="people" class="venue-select">
                    <option value="Select how many people">Select how many people</option>
                    <option value="2 People">2 People</option>
                    <option value="3 People">3 People</option>
                    <option value="4 People">4 People</option>
                    <option value="5 People">5 People</option>
                    <option value="6 People">6 People</option>
                    <option value="7 People">7 People</option>
                    <option value="8 People">8 People</option>
                    <option value="9 People">9 People</option>
                    <option value="10 People">10 People</option>
                    <option value="10+ People">10+ People</option>
                </select>
            </div>

            <div id="booth-notice" style="display:none;">
                <label style="color: #ed1c24!important; font-size: 16px!important; line-height: 1.4em!important;"><em style="color: #ed1c24!important;">Customer Notice * Booths are not available for parties with more than 10 people</em></label>
            </div>

            <div id="tenplus"><!-- HIDE THESE IF THERE IS MORE THAN 10 PEOPLE -->           
                <div>
                    <label for="form1_booth">Would you like a Booth: <em>*Liverpool &amp; Manchester Only</em> <a href="#">What's this?</a></label>
                    <select id="form1_booth" name="booth" class="venue-select">
                        <option value="Please select an option">Please select an option</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>

                <div>
                    <label for="form1_booth-package">We have some Booth Packages <a href="#">What's this?</a></label>
                    <select id="form1_booth-package" name="booth-package" class="venue-select">
                        <option value="Select an option if wanting a booth">Select an option if wanting a booth</option>
                        <option value="Bier Package">Bier Package</option>
                        <option value="Cocktail Package">Cocktail Package</option>
                        <option value="Just a booth please">Just a booth please</option>
                    </select>
                </div>

            </div><!-- HIDE THESE IF THERE IS MORE THAN 10 PEOPLE -->

Answer 1

我认为你应该在你的逻辑中改变一些东西，我现在会解释我会做些什么。

您的JavaScript写得正确，但只有在发生“更改”事件时才会调用它。因此，当您从主页发布帖子后加载页面时，选择值已经更改，您的功能将不会被调用。

你可以这样做。它不是很优雅，但它可以完成你的工作：

$(document).ready(function(){
    boothUpdate(); // This function is called at every page load
    $('#form1_people').on('change',function(){
        boothUpdate(); // This function is called at every select change
    });    
});

function boothUpdate() {
    if( $(this).val()==="10+ People"){
        $("#tenplus").hide()
        $("#booth-notice").show()
    }
    else {
        $("#tenplus").show()
        $("#booth-notice").hide()
    }
}

Answer 2

我设法通过在函数末尾添加.trigger('change');来对此进行排序。

这里有完整的工作脚本：

$(document).ready(function(){   
    $('#form1_people').on('change',function(){
        if( $(this).val()=="10+ People"){
            $("#tenplus").hide()
            $("#booth-notice").show()
        }
        else{
            $("#tenplus").show()
            $("#booth-notice").hide()
       }
   }).trigger('change');
});

感谢大家的帮助......

根据主页中的选择值隐藏表单选择字段？

2 个答案: