无法使用javascript隐藏或显示引导模态表单内的div

Question

I have a modal form but my div never gets displayed when I change the Business Type to "Sole Trader", "Partnership" or "Limited Company". This is something that I have been struggling for days. Please someone assist.

@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

This has to be your drop down format.

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

this will give u actual value and based on if else condition you can show or hide class..

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

if you want text then just replace the code, you can keep your format and get value based on text..

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

this is code to show or hide div ..

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

Answer 2

There is no values in <option>

should be

<select id="businessType" title="Choose from the list" onchange="checkOtherFields(this.value);">
    <option value="Rental Accounts" selected>Rental Accounts</option>
    <option value="CIS Contractor">CIS Contractor</option>
    <option value="Private Hire Driver">Private Hire Driver</option>
    <option value="Sole Trader">Sole Trader</option>
    <option value="Partnership">Partnership</option>
    <option value="Limited Company">Limited Company</option>
</select>

SideNote: with jQuery change function, it will be a-lot easier

 $(document).ready(function(){ $("#businessType").change(function () { var selval = $(this).val(); // alert(selval); if (selval == "Sole Trader" || selval == "Partnership" || selval == "Limited Company") { alert("show me"); } else { alert("hide me"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="businessType" title="Choose from the list"> <option value="Rental Accounts" selected>Rental Accounts</option> <option value="CIS Contractor">CIS Contractor</option> <option value="Private Hire Driver">Private Hire Driver</option> <option value="Sole Trader">Sole Trader</option> <option value="Partnership">Partnership</option> <option value="Limited Company">Limited Company</option> </select> 

Fiddle