Question

我是Java的新手，正在尝试使用bootstrap和JQuery构建条件表格。我非常感谢您的帮助，因为我一天中大部分时间都在工作，但无济于事。

当名称为div的选择字段的值为physician或{时，我试图显示ID为AppointmentType的{{1}}（及其后的字段） {1}}。这是link to the live form。

这是我的JavaScript：

Orthopedic

Answer 1

这些行将导致错误（您应该在devtools控制台中看到）：

var appttype = $('#secureform input:select[name=AppointmentType]'); // `input:select` is not a valid selector and causes the rest of the script to fail

physician.addClass('hidden');   // `addClass` is a jQuery method, so this should be `$(physician).addClass('hidden')`

physician.removeClass('hidden');// `removeClass` is a jQuery method, so this should be `$(physician).removeClass('hidden')`

更正这些行，它应该可以工作。

如果有帮助，我会这样写：

$( document ).ready(function () {
    //Inputs that determine what fields to show
    var apptType = $('#secureform select[name="AppointmentType"]'); // dropped the `input:` part
    var physician = document.getElementById('physician');

    physician.classList.add('hidden'); //hide this initially, outside the change handler

    apptType.change(function () { // when the Appointment Type changes
        var value = $(this).val().toLowerCase();    // leave case-sensitivity out of it.
        var showables = [   // using an array as I prefer using a simple `indexOf` for multiple comparisons
            'orthopedic',
            'rheumatology',
        ];
        var isShowable = showables.indexOf(value) > -1;

        physician.classList.toggle('hidden', !isShowable);
        // or, the jQuery equivalent: 
        // $(physician).toggleClass('hidden', !isShowable);
    }); 
});

Answer 2

您的选择器不正确：

var appttype = $('#secureform input:select[name=AppointmentType]');
// this should be
var appttype = $('#secureform select[name=AppointmentType]');

此外，您正在将jquery与原始JS混合。您在这里使用香草js

var physician = document.getElementById("physician");

医师现在是dom对象，而不是jquery对象。您应该改用以下方法：

var physician = $("#physician");

另外，您应该替换

var value=this.value;

与此

var value= $(this).val();

故障排除条件表

2 个答案: