javascript - 无法使用 javascript 在引导模式表单中隐藏或显示 div

Question

我有一个模态表单，但当我将业务类型更改为“个体商人”、“合伙企业”或“有限公司”时，我的 div 永远不会显示。这是我这些天一直在苦苦挣扎的事情。请有人帮忙。

@model CertaxBoltonSouth2.Models.inputModels

<script type="text/javascript">
    $(window).ready(function ()
    {
        $('#onLineQuoteModal').modal('show');
    });

    function checkOtherFields(value)
    {
        var e = document.getElementById("turnOverDiv")
        e.class = "hideDiv";
        if (value == "Sole Trader" || value == "Partnership" || value == "Limited Company")
        {
            e.class = "displayDiv";
        }

    }
</script>

<div id="Online Quotation">
    <h3 class="modal-title">Online Quotation</h3>
</div>


<div class="modal fade onLineQuoteModal" id="onLineQuoteModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            @using (Html.BeginForm("OnlineQuotation", "Price", FormMethod.Post))
            {
                <div class="modal-header Modal-Header-Custom center">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Instant Quotation</h4>
                </div>
                <div class="modal-body">
                    @Html.ValidationSummary(true)

                        <div class="col-md-3 text-left">
                            @Html.LabelFor(modal => modal.BusinessTypeIndex, "Your Business Type:")
                        </div>
                        <div class="col-md-3 dropdown">
                            <select id="businessType" title="Choose from the list" onchange="checkOtherFields(this.value);">
                                <option selected>Rental Accounts</option>
                                <option>CIS Contractor</option>
                                <option>Private Hire Driver</option>
                                <option>Sole Trader</option>
                                <option>Partnership</option>
                                <option>Limited Company</option>
                            </select>
                        </div>
                    </div>
                    <div class="row text-nowrap hideDiv turnOverDiv" id="turnOverDiv">
                        <div class="col-md-3 text-left">
                            @Html.LabelFor(modal => modal.TurnOverIndex, "Your Turnover:")
                        </div>
                        <div class="col-md-3 dropdown">
                            <select id="turnOver" title="Choose from the list">
                                <option>£0 - £50,000</option>
                                <option>£50,001 - £100,000</option>
                                <option>£100,001 - £200,000</option>
                                <option>£200,001 - £300,000</option>
                                <option>£300,001 - £400,000</option>
                                <option>£400,001+</option>
                            </select>
                        </div>
                    </div>
                </div> // end /. modal-body
                <div class="modal-footer center">
                    <button class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
                    <input class="btn btn-primary btn-sm" type="submit" value="Get Quotation" />
                </div>
            }
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

这必须是您的下拉格式。

<select id="DroDownId">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
</select>

这将为您提供实际值，并根据 if else 条件您可以显示或隐藏类..

var e = document.getElementById("DroDownId");
var strUser = e.options[e.selectedIndex].value;

如果您想要文本，只需替换代码，您可以保留格式并根据文本获取值。

var e = document.getElementById("DroDownId");
var strUser = e.options[e.selectedIndex].value;

这是显示或隐藏 div 的代码..

  document.getElementById(one).style.display = 'block';
    document.getElementById(two).style.display = 'none';