Question

如果我选择选项1，我想获得categClass1 如果我选择选项2，我想获得categClass2 等...

我希望获得功能addCategory：

＆＃13;

function addCategorySelectBox(i) {

    var  = document.getElementById("newCateg").value;
    var y = document.getElementById('selectCategory');
    var option = document.createElement("option");
//create class name dynamically;
    option.setAttribute('class', "categClass" + i);

    option.value = categoryValue;
    option.text = categoryValue;
    y.add(option);
    var newCategClass = "categClass" + i;
   
    return "categClass" + i;
    
}
function addCategory() {
// ??
var x =document.getElementsByClassName(newCategClass);
    
}

＆＃13;

    <p>Ονομα Kατηγορίας:
        <label>
            <input type="text" name="new-cat" id="newCateg" />
        </label>
        <input type="button" name="add-c" id="addCateg" value="Προσθήκη" onclick="return addCategorySelectBox(1);addCategory()" />
    </p>
    <p>&nbsp;</p>

    <p>Κατηγορία:
        <select id="selectCategory">
            <option>Επιλογή ...</option>
            <option class="categClass1">Εξοδα Κατοικίας</option>
            <option class="categClass2">Εξοδα Εκπαίδευσης</option>
            <option class="categClass3">Εξοδα Ψηχαγωγίας</option>
        </select>

＆＃13;

Answer 1

概念如下：

创建一个处理所需行为的函数;
将第一篇文章中的函数设置为HTML元素的处理程序。

HTML：

<select id="selectCategory" onchange="getClass(this)">
    <...>
</select>

JavaScript：

function getClass(sel){
   console.log(sel.options[sel.selectedIndex].className)
}

JSFiddle

您还可以通过js方法设置处理程序，而无需与html交互：

document.querySelector('#selectCategory').onchange = function (){
   console.log(document.querySelector('#selectCategory option:checked').className)
}

JSFiddle

使用setAttribute()方法还有一个选项，唯一的缺陷是硬编码部分'getClass(this)'。

function getClass(sel){
    console.log(sel.options[sel.selectedIndex].className)
}
document.querySelector('#selectCategory').setAttribute('onchange', 'getClass(this)')

JSFiddle

选择框中的getElementsByClassname

1 个答案: