读取所有下拉列表的选定值

Question

In my application we have many drop down lists. And these count of these lists will change depending on user selection. I need to read the selected value of all the dropdown lists. But I couldn't get the following code working. I am getting empty value for ids2.

HTML

<div>
    <ul class="nav nav-tabs nav-stacked" data-bind="foreach:fileHeaders">
        <li><div>               
                <select data-bind="options:$parent.parentDDL, optionsText: 'text', optionsValue: 'id',value : parentTypeName, optionsCaption: 'Select Type...'"></select>
               <span class="childselect" data-bind="visible:showChildDDL"><select class="selChildDDL" data-bind="options:childDDL,  value: childSelect" ></select></span> 
            </div>
        </li>
    </ul>
</div>

Javascript

 self.saveImportClicked = function (temp) {

            var selVal = $('#selChildDDL').val();

            //var ids = $("select.selChildDDL > option:selected").map(function (n, i) {
            //    return $(n).innerHTML();
            //}).join(",");

            var ids2 = $(".selChildDDL > option:selected").map(function (n, i) { return $(i).innerHTML() }).toArray().join(",");

            //var optiontext;
            //var childid2 = $('#selChildDDL option').each(function (index, option) { 
            //     optiontext = option.innerHTML;
            //                });   

 }; 

Answer 1

Use jquery's html() method instead of innerHTML() :

var ids2 = $(".selChildDDL > option:selected").map(function (n, i) { 
    return $(i).html();
}).toArray().join(",");

innerHTML is a property of a browser's native DOM element. html() is a method that is callable on a jquery object (like $(i) in your example code).

Answer 2

.innerHTML is not a jQuery method. It is a native DOM property. so try the following.

var ids2 = $(".selChildDDL > option:selected").map(function(n, i){
    return ($(i)[0].innerHTML);
}).toArray().join(",");

console.log(ids2);

$(i)[0].innerHTML or i.innerHTML do exactly the same thing.