选择框中的getElementsByClassname

debugcn 发表于 Dev

nikolaosmparoutis

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

我想让那些功能addCategory：

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

    <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>

钾盐

概念如下：

创建一个函数来处理您想要的行为；
将第一篇文章中的函数设置为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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。