2017-02-10 56 views
1

enter image description here我想有相同的表下拉值

var songsRef = firebase.database().ref('/KTV-Bar/' + loggeduser + '/Reservations/'); 


songsRef.on('child_added', function (snapshot) { 

    mRetrieveSongs = snapshot.val(); 
    $("#dataTables").append(
    "<tr data-id='" + snapshot.key + "'>" 
     + "<td>" + mRetrieveSongs.playlistkey + "</td>" 
     + "<td>" + mRetrieveSongs.username + "</td>" 
     + "<td>" + mRetrieveSongs.numberofhours + "</td>" 
     + "<td>" + mRetrieveSongs.dates + "</td>" 
     + "<td>" + snapshot.key + "</td>" 
     // +"<td id=room>"+"</td>" 
     + "<td id=room>" + '<select id="selectRoom"></select>' + "</td>" 
     + "<td>" + mRetrieveSongs.capacity + "</td>" 
     + "<td>" + '<input type="button" value="Accept" id = "accept" onclick="writeUserData(this)" ">' 
     + ' <input type="button" value="Decline" id = "decline" onclick="myFunctionDecline(this)" ">' 
     + "<td>" + '<th> </th>">' 
     + "</td>" 
    + "</tr>" 

    ) 

}); 

var roomRef = firebase.database().ref('/KTV-Bar/' + loggeduser + '/Room'); 
roomRef.on('child_added', function (snapshot) { 

    mRetrieveRooms = snapshot.val(); 
    rooms = mRetrieveRooms.room; 


    var select = document.getElementById("selectRoom"); 
    for (var i = 0; i < rooms.length; i++) { 
     var opt = rooms[i]; 
     var el = document.createElement("option"); 
     el.textContent = opt; 
     el.value = opt; 
     select.appendChild(el); 
    } 

}); 

我想有表的每一行中我的下拉列表中的数据相同。我从我的firebase数据中填充了我的下拉列表,但它只填充了表的第一行下拉列表。

我该如何解决这个问题?

+0

你有没有试着用一个共同的类,而不是相同的ID改变'select'箱?具有相同ID的多个元素不是有效的HTML。 – Varun

+0

无论您从Firebase数据中获得哪些选项,都会将其保存在变量中。现在,将这些变量作为'options'附加到其他下拉菜单 –

+0

@KalpeshSingh它不起作用。不过,只有第一行得到填充 – Earvin

回答

0

假设您正在动态追加选项。您可以利用我的代码来生成愿望输出。

var options = ["Make", "America", "Great", "Again"]; 
 

 
var firstDropdown = document.getElementById('first'); 
 
var secondDropdown = document.getElementById('second'); 
 

 
appendOptions(firstDropdown, options); 
 

 
appendOptions(secondDropdown, options); 
 

 
function appendOptions(elem, options) { 
 
    options.forEach(function(value) { 
 
    var option = document.createElement("option"); 
 
    option.text = value; 
 
    elem.appendChild(option); 
 
    }); 
 
}
<select id="first"> 
 
</select> 
 

 
<select id="second"> 
 
</select>

相关问题