Получение «значения» из динамически сгенерированного выпадающего списка с использованием JavaScript

Question

Я могу получить значение, когда я использую статический раскрывающийся список, но как только я перехожу к динамически генерируемому списку, значение всегда пустое.

У кого-нибудь есть идеи? Возможно ли даже получить значение из динамического элемента?

JS:

$('#input_baseUrl').ready(function(){ 
    var newSelect=document.createElement('select'); 
    var selectHTML=""; 

    for(var count=0; count<services.length; count=count+1){ 
     var tempString = services[count].split("/"); 
     var serviceName = tempString[3]; 
     selectHTML+= "<option value='"+services[count]+"'>"+serviceName+"</option>"; 
    } 

    //iniatilize a new select with the data we provided 
    newSelect.innerHTML= selectHTML; 
    //find the DOM element that is called input_baseURL 
    document.getElementById("input_baseUrl").appendChild(newSelect); 

}); 

function setURL() { 
    var url = document.getElementById("input_baseUrl").value; 
    alert($('#input_baseUrl').val()); // not sure if jQuery will work here but I have to try 
    window.alert("THE URL is: " + url); 
    var element = document.getElementById("input_baseUrl"); 
    var strUser = element.options[element.selectedIndex].value; 
    window.alert("Third option is: " +strUser); 
} 

HTML:

<form id='api_selector'> 
    <div class='input' id="input_baseUrl" onchange="setURL()" name="baseUrl" type="text"></div> 
    <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div> 
    <div class='input'><a id="explore" href="#">Explore</a></div> 
</form> 

Answer 1

Да, это возможно. Но вы должны будете использовать более развернутую селектор:

$('#input_baseUrl select option:selected').val(); 

Но я думаю, что ваш HTML имеет проблемы на следующей строке, вы имели в виду, что это две метки, input внутри div?

<div class='input' id="input_baseUrl" onchange="setURL()" name="baseUrl" type="text"></div> 

Чтобы исправить это, разделить его на две бирками, и дать ваш divid:

<form id='api_selector'> 
    <div class='input' id="div_baseUrl"> 
     <input id="input_baseUrl" onchange="setURL()" name="baseUrl" type="text"/> 
    </div> 
    ... 
</form> 

Вы можете добавить newSelect к вашему div из вашей ready() функции:

document.getElementById("div_baseUrl").appendChild(newSelect); 

После этого ваша функция setUrl() может быть:

function setURL() { 
    var url = $('#input_baseUrl').val(); 
    var strUser = $('#div_baseUrl select option:selected').val(); 
}