Question

我无法直接访问HTML文件，因此我在下拉列表中添加了一个类，但是当捐赠表单加载时，所有下拉列表仍然可见。只有在我做出与默认值不同的选择之后，才会使下拉消失。

有没有办法让我可以这样做只有“选择省”下拉菜单可见，然后其他人出现选择的选项？我的代码如下。

HTML：

<div class="custom-field-container form-row ">
    <div class="form-content">
        <span class="field-required"></span>
        <div class="form-input-label-block">
            <label for="select_province_dropdown">Select Province</label>
        </div>
        <div class="styled-select" style="width: 159px;">
            <select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
                <option selected="selected" value="----Select Province----">----Select Province----</option>
                <option value="AB">AB</option>
                <option value="BC">BC</option>
                <option value="MB">MB</option>
                <option value="NB">NB</option>
                <option value="NL">NL</option>
                <option value="NS">NS</option>
                <option value="ON">ON</option>
                <option value="PE">PE</option>
                <option value="QC">QC</option>
                <option value="SK">SK</option>
            </select>
        </div>
        <script type="text/javascript">
        <!--
        var comp = new ObservableComponent('select_province_dropdown', '');
        comp.hide = function(_hidden) {
            var _display = _hidden ? 'none' : '';
            set_display('select_province_dropdown_Row', _display);
            this.disable_submit_flag(_hidden);
        }
        //-->
        </script>
        <noscript>&lt;br/&gt;Required</noscript>
        <input type="hidden" name="select_provincesubmit" id="select_provincesubmit" value="true">
    </div>
</div>

<div class="custom-field-container form-row ">
    <div class="form-content hideAB">
        <span class="field-required"></span>
        <div class="form-input-label-block">
            <label for="golf_for_the_cure_ab_dropdown">Select Location</label>
        </div>
        <div class="styled-select" style="width: 165px;">
            <select name="golf_for_the_cure_ab_dropdown" id="golf_for_the_cure_ab_dropdown" size="1" style="width: 189px;">
                <option selected="selected" value="----Select Location----">----Select Location----</option>
                <option value="Lakewood Golf Resort">Lakewood Golf Resort</option>
                <option value="Twin Willows Golf Club">Twin Willows Golf Club</option>
            </select>
        </div>
        <script type="text/javascript">
        <!--
        var comp = new ObservableComponent('golf_for_the_cure_ab_dropdown', '');
        comp.hide = function(_hidden) {
            var _display = _hidden ? 'none' : '';
            set_display('golf_for_the_cure_ab_dropdown_Row', _display);
            this.disable_submit_flag(_hidden);
        }
        //-->
        </script>
        <noscript>&lt;br/&gt;Required</noscript>
        <input type="hidden" name="golf_for_the_cure_absubmit" id="golf_for_the_cure_absubmit" value="true">
    </div>
</div>

CSS：

<style>
.hideAB,
.hideBC,
.hideMB,
.hideNB,
.hideNL,
.hideNS,
.hideON,
.hidePE,
.hideQC,
.hideSK {display: none;}
</style>

jQuery的：

<script>
$('#golf_for_the_cure_ab_dropdown').parent('div').addClass('hideAB');
$('#golf_for_the_cure_bc_dropdown').parent('div').addClass('hideBC');
$('#golf_for_the_cure_mb_dropdown').parent('div').addClass('hideMB');
$('#golf_for_the_cure_nb_dropdown').parent('div').addClass('hideNB');
$('#golf_for_the_cure_nl_dropdown').parent('div').addClass('hideNL');
$('#golf_for_the_cure_ns_dropdown').parent('div').addClass('hideNS');
$('#golf_for_the_cure_on_dropdown').parent('div').addClass('hideON');
$('#golf_for_the_cure_pe_dropdown').parent('div').addClass('hidePE');
$('#golf_for_the_cure_qc_dropdown').parent('div').addClass('hideQC');
$('#golf_for_the_cure_sk_dropdown').parent('div').addClass('hideSK');

$('#select_province_dropdown').on('change', function() {
    if ($("#select_province_dropdown").val() === "AB") {
        $(".hideAB").attr("style", "display: block;");
    } else {
        $(".hideAB").attr("style", "display: none;");
    }
});

$('#select_province_dropdown').on('change', function() {
    if ($("#select_province_dropdown").val() === "BC") {
        $(".hideBC").attr("style", "display: block;");
    } else {
        $(".hideBC").attr("style", "display: none;");
    }
});
</script>

感谢您的时间！

编辑：我正在添加捐款表单的链接：Donation Form

我可能没有向你展示你可能需要看的东西。

Answer 1

你可以删除所有的css等，并使用类似的东西

$(".styled-select").hide();
$("#select_province_dropdown").parent("div").show();
$("#select_province_dropdown").on("change", function(){
    if($(this).val() !== $("select_province_dropdown option:first").val()){
      $("#golf_for_the_cure_ab_dropdown").parent("div").show();
    }
});

如何在使用jQuery加载页面时隐藏多个下拉列表？

1 个答案: