从选择框中获取 ElementsByClassname

Question

如果我 select 选项 1 我想得到 categClass1.
如果我 select 选项 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>

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

从选择框中获取 ElementsByClassname

getElementsByClassname from selection box

html

javascript

javascript-events