尝试在选择表单中的七个值之一时显示复选框

所以，我已经稍微修改了代码来使用jQuery的change事件。

代码如下:

$("#job_title").change(function() {
  var auth = $(this).children(":selected").data('auth');
  if (auth == 'need-purchase-auth') {
    $("#authorized_to_purchase").show();
  } else {
    $("#authorized_to_purchase").hide();
  }
});

基本上，我们在选择框上放置了一个事件侦听器，以便在选择不同选项时触发。然后，我们必须通过检查哪个选项具有:selected属性来查找哪个选项被选中了。然后，使用attr()方法获取data-auth属性值。最后，您只需要检查数据验证值是否等于您正在寻找的值。如果是，则显示复选框。如果不是，就把它藏起来。如果您需要对我的代码进行进一步的解释，请告诉我。

//bind the event handler in your script, not inline
$( '#job_title' ).on( 'change', function () {
    if ( $( this ).find( 'option:checked' ).data( 'auth' ) === 'need-purchase-auth' ) {
        //do stuff
        console.log('weee');
    }
} );

我将摆脱内联事件处理程序，并这样做:

$('#job_title').change(function showAuthBox(val) {
  if ($('option:selected', this).data('auth') == "need-purchase-auth") {
    $('#authorized_to_purchase_box').css("display", "block");
  } else {
    $('#authorized_to_purchase_box').css("display", "none");
  }
})

#authorized_to_purchase_box {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="job_title" id="job_title">
  <option selected disabled hidden style='display: none' value=''></option>
  <option id="Superintendent" value="Superintendent">Superintendent</option>
  <option id="Assistant-Superintendent" value="Assistant Superintendent">Assistant Superintendent</option>
  <option id="Principal" value="Principal">Principal</option>
  <option id="Vice-Principal" value="Vice Principal">Vice Principal</option>
  <option id="Counselor" data-auth="need-purchase-auth" value="Counselor">Counselor</option>
  <option id="Testing-Coordinator" data-auth="need-purchase-auth" value="Testing Coordinator">Testing Coordinator</option>
  <option id="Curriculum-Director" data-auth="need-purchase-auth" value="Curriculum Director">Curriculum Director</option>
  <option id="Administrator" data-auth="need-purchase-auth" value="Administrator">Administrator</option>
  <option id="Teacher" data-auth="need-purchase-auth" value="Teacher">Teacher</option>
  <option id="Parent" data-auth="need-purchase-auth" value="Parent">Parent</option>
  <option id="Student" data-auth="need-purchase-auth" value="Student">Student</option>
</select>
<div id="authorized_to_purchase_box">
authorized_to_purchase_box
</div>

尝试收听#job_title的更改。然后检查所选选项是否为"need-purchase-auth"数据-auth。所以你最好把函数体改成这样:

$('select#job_title').on("change", function () {
  var dataAuthVal = $(this).children('option:selected').attr('data-auth');
  if ('need-purchase-auth' == dataAuthVal) 
    $('#authorized_to_purchase_box').css("display", "block");
  else
    $('#authorized_to_purchase_box').css("display", "none");