Question

我正在尝试获取所选选项的类，并在比较语句中使用它来准确找到它所在的类。即使选项标签设置了类，我仍然会得到一个未定义的值。任何人都可以帮我弄清楚为什么我没有得到回报价值？

以下是我正在尝试使用的代码：

HTML：

<select name="datagrid_filter" onchange="startFilter();">
    <option>All</option>
    <option disabled="true">Assignment:</option>
    <option disabled="true">Client:</option>
    <option disabled="true">Type:</option>
    <option class="type" value="Activity"> &nbsp Activity</option>
    <option class="type" value="Alert"> &nbsp Alert</option>
    <option class="type" value="Lead"> &nbsp Lead</option>
    <option class="type" value="Notification"> &nbsp Notification</option>
</select>

使用Javascript：

var cs1 = $("option:selected", this).attr("class");
if(cs1 == 'Type'){
    //do something
}

Answer 1

你应该改变：

onchange="startFilter();"至onchange="startFilter(this);"

和 startFilter 功能：

function startFilter(ele){
    var cs1 = $("option:selected", ele).attr("class");
    if(cs1 == 'type'){
        //do something
    }
}

请注意，在 startFilter 功能的上下文中，this是window对象。

Answer 2

为什么不使用hasClass jQuery API？在这种情况下非常好：

if($("option:selected", this).hasClass('type')){
    //do something
}

并确保this引用适当的对象（如提到的@undefined）
或者使用：

if($("option:selected", "select[name=datagrid_filter]").hasClass('type')){
        //do something
    }

或者：

if($("select[name=datagrid_filter] option:selected").hasClass('type')){
            //do something
 }

Answer 3

尽量不要使用内联JavaScript

<强> Fiddle Demo

JavaScript

   $(function()
    {
        var handleChange    =   function()
                                {
                                    var $this     = $(this);
                                    var $selected = $this.children(":selected");
                                    var isType    = $selected.hasClass('type');
                                    if(isType)
                                    {
                                        alert('Do Something');                        
                                    }
                                };
        var $datagridFilter =  $('[name=datagrid_filter]')

        $datagridFilter.change(handleChange);

    });

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select onchange="getval(this);" class="sele">
   <option>All</option>
    <option disabled="true">Assignment:</option>
    <option disabled="true">Client:</option>
    <option disabled="true">Type:</option>
    <option class="type" value="Activity"> &nbsp Activity</option>
    <option class="type" value="Alert"> &nbsp Alert</option>
    <option class="type" value="Lead"> &nbsp Lead</option>
    <option class="type" value="Notification"> &nbsp Notification</option>
</select>
<script>
 function getval(sel)
{

    if($('.sele :selected').attr('class'))
    {
      console.log($('.sele :selected').attr("class","typ123"));
          // Your code write here
    }

}
</script>

如何使用jquery和javascript获取类属性值

4 个答案: