语法-----构建（选择，下拉列表）

Question

这是我到目前为止所尝试的内容：

var getJqInputs = function(html) {
  var el = document.createElement('div');
  el.innerHTML = html;
  return el.childNodes[0];
}
alert(getJqInputs(document.getElementById("select").outerHTML));
/*getJqInputs(document.getElementById("select").outerHTML).addEventListener("change", function(){
    alert("sd");   
});*/
getJqInputs(document.getElementById("select").outerHTML).onchange = function() {
  alert("dhhj");
};

<select id="select">
  <option id="someid" name="1" class="someclass">Subhan</option>
  <option id="someid" name="2" class="someclass">Subhan</option>
  <option id="someid" name="3" class="someclass">Subhan</option>
  <option id="someid" name="4" class="someclass">Subhan</option>
  <option id="someid" name="5" class="someclass">Subhan</option>
  <option id="someid" name="6" class="someclass">Subhan</option>
  <option id="someid" name="7" class="someclass">Subhan</option>
  <option id="someid" name="8" class="someclass">Subhan</option>
  <option id="someid" name="9" class="someclass">Subhan</option>
  <option id="someid" name="20" class="someclass">Subhan</option>
  <option id="someid" name="23" class="someclass">Subhan</option>
</select>

我在实际场景中只有文字，我从中获取一个dom对象，然后尝试在其上添加更改事件。我的目的是为每个选项选择name属性，但没有运气

虽然JQuery更容易，但我只能使用Javascript。

我已经有了将html字符串从here

转换为DOM的想法

我的问题是如何在拥有HTMLSelectElement对象时添加更改事件？（不是来自身份证或班级）

Answer 1

你这里有很多额外的，不需要的代码。您只需在列表更改时找到所选选项，并按名称提取其属性值：

document.getElementById("select").addEventListener('change', function() {
    alert(this.options[this.selectedIndex].getAttribute('name'));
});

<select id="select">
  <option id="someid" name="1" class="someclass">Subhan</option>
  <option id="someid" name="2" class="someclass">Subhan</option>
  <option id="someid" name="3" class="someclass">Subhan</option>
  <option id="someid" name="4" class="someclass">Subhan</option>
  <option id="someid" name="5" class="someclass">Subhan</option>
  <option id="someid" name="6" class="someclass">Subhan</option>
  <option id="someid" name="7" class="someclass">Subhan</option>
  <option id="someid" name="8" class="someclass">Subhan</option>
  <option id="someid" name="9" class="someclass">Subhan</option>
  <option id="someid" name="20" class="someclass">Subhan</option>
  <option id="someid" name="23" class="someclass">Subhan</option>
</select>

Answer 2

以非常简单的语法声明JSON对象，如代码所示。
然后只需调用Build() - 函数，并传入对象构造函数（Select）和JSON对象（下拉列表）。

语法-----构建（选择，下拉列表）

// CODE

<!DOCTYPE html>
<html>
<head>
<script>
    //ON VALUE CHANGE       
    var valChange = function(ele) { 
        console.log(ele.value);
    };    
    //SIMPLE JSON SYNTAX
    var dropdown = [
        {"select":{"element": "select", "attributes": {"id":"select","onchange":"valChange(this)"}}},
        {"opt1":{"element": "option", "attributes": {"id":"opt1","class":"someclass"}}},
        {"opt2":{"element": "option", "attributes": {"id":"opt2","class":"someclass"}}},
        {"opt3":{"element": "option", "attributes": {"id":"opt3","class":"someclass"}}}
    ];
    //BUILD FUNCTION TAKES TO PARAMETERS OBJECT (CONSTRUCTOR,JSON-OBJECT)
    function Build(obj,json){
        var select = new Construct(obj,json);
        Assemble(select);
        Create(select);
    }
    //OBJECT CONSTRUCTOR (SELECT) 
    //THE PROPERTIES OF THE OBJECT ARE DECLARED DYNAMICALLY
    function Select(){
        for(var i=0; i < arguments.length; i++){
            var key = Object.keys(arguments[i]);
            this[key] = arguments[i][key];
        }   
    }
    //CREATES A NEW OBJECT AND APPLYS PROPERTIES
    //CALLED FROM THE BUILD FUNCTION
    //TAKES TO ARGUEMENTS - OBJ(CONSTRUCTOR), ARGS(JSON-OBJECT) 
    function Construct(obj,args){
        var Fake = new obj;
        obj.apply(Fake, args);
        return Fake;
    }
    //ASSEMBLES THE HTML ELEMENTS FROM THE OBJECT PROPERTIES AND APPLIES THE ATTRIBUTES & VALUES
    function Assemble(obj){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                var element = document.createElement(obj[key].element);
                var attributes = obj[key].attributes;
                for(prop in attributes){
                    if(attributes.hasOwnProperty(prop)){
                        element.setAttribute(prop, attributes[prop]);
                        obj[key] = element;
                    }
                }   
            }
        }       
    }
    //APPENDS THE OBJECT TO THE ACTUAL DOCUMENT
    function Create(obj){
        var opts = Object.keys(obj).splice(1);
        var select = document.body.appendChild(obj.select);
        for(i=0; i < opts.length; i++){
            select.appendChild(obj[opts[i]]).innerHTML = "Subhan" + i;
        }           
    }   
</script>
</head>
<body></body>
</html>

更改后的Javascript无法处理[object html select element]

2 个答案:

语法-----构建（选择，下拉列表）