无法使用javascript在引导模式窗体中隐藏或显示div

时间:2015-10-06 17:38:54

标签: javascript bootstrap-modal

我有一个模态表单,但当我将业务类型更改为“Sole Trader”,“Partnership”或“Limited Company”时,我的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 -->

2 个答案:

答案 0 :(得分:1)

这必须是您的下拉格式。

for i in range(0, 9):
    for j in range(0, 9):
        if self.get(i)[j] == "1":
            return (i, j)

这将给你实际值,并根据if else条件你可以显示或隐藏类..

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

如果您想要文本然后只需替换代码,您可以保留格式并根据文本获取价值..

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

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

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

答案 1 :(得分:0)

<option>

中没有值

应该是

<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:使用jQuery更改功能,它将更容易

$(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