Question

如果标记为data-auth =＆＃34; need-purchase-auth＆＃34;的七个职位之一，请尝试显示#authorized_to_purchase_box。被选中。

不确定为什么它不起作用。如果有更好的方法，请批评/告诉我。

HTML：

<select name="job_title" id="job_title" onchange='showAuthBox(this);'>
    <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>

Jquery的：

function showAuthBox(val) {
    alert(val.dataset.auth);
    if(val.dataset.auth == "need-purchase-auth") {
        $('#authorized_to_purchase_box').css("display", "block");
    } else {
        $('#authorized_to_purchase_box').css("display", "none");
    }
}

Answer 1

所以，我已经修改了一些代码以使用jQuery的更改事件。

以下是代码：

$("#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属性值。要完成，您只需检查data-auth值是否等于您要查找的值。如果是，请显示复选框。如果没有，请隐藏它。如果您需要我的代码的进一步说明，请告诉我。

Answer 2

//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');
    }
} );

Answer 3

我将摆脱内联事件处理程序并以这种方式执行：

import pandas as pd

stock =['adma','aapl','fb'] # list has about 700 stocks which I extracted from a pickled dataframe that was storing the info. 

#The site I'm visiting is below with the name of the stock added to the end of the end of the link
##http://finviz.com/quote.ashx?t=adma
##http://finviz.com/quote.ashx?t=aapl

df2 = pd.DataFrame()

for i in stock:
    df = pd.read_html('http://finviz.com/quote.ashx?t={}'.format(i), header =0)[-2].set_index('SEC Form 4')
    df['Stock'] = i.upper() # creating a column which has the name of the stock, so I can differentiate between stocks
    df2 = df2.append(df)

$('#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");
  }
})

Answer 4

尝试听 #job_title 的更改。然后检查所选选项是否为“need-purchase-auth”data-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");

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

4 个答案: