如何使用jquery从选择标记中的选定选项中获取类名称的警报?

时间:2018-10-20 12:54:53

标签: javascript

我有一个<select>标记,其中包含所有来自数据库的选项。我想发生的是,当我选择一个特定的选项时,我想获得类名,但是当我这样做时,我得到的是Undefined。为什么会这样?

HTML

<select id="mySelect"  class="form-control get-this">
    <?php
             foreach ($res as $r) {
             ?>

      <option class="<?= $r->item_name ?>" ><?= $r->item_name ?></option>


              <?php }
            ?>

       </select>

JavaScript

<script>
       $('.get-this').on('change', function() { 
    var optionSelected = $("option:selected", this);
    var valueSelected = $('option:selected').attr('class'); 

alert($(this).find('option:selected').attr("class"));

}); 
</script>

1 个答案:

答案 0 :(得分:0)

要获取元素的类名称,请使用JavaScript的.className属性。

语法:

object.className

示例:

console.log(document.querySelector("#element").className);

对于多个类,请使用classList(仅在较新的版本中):

// Gets fourth class
console.log(document.querySelector("#element").classList[3];

要在旧版本中模拟classList,请使用.split(/\s+/)

// Gets fourth class
console.log(document.querySelector("#element").className.split(/\+s/)[3];

来源:How to get class of clicked element

编辑: @安德里亚斯是对的。您已经使用的代码已经可以使用,不需要修改。

console.log($("#element").attr("class"));

$("#js").text(document.querySelector("#element").className);
$("#jq").text($("#element").attr("class"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="element" class="my-class"></div>

<code>.className</code> returns: <span id="js"></span><br>
<code>.attr("class")</code> returns: <span id="jq"></span>