заполнение выпадающего списка с помощью jquery

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

I have a select id of name-data here is the JQuery code, what am I doing worng guys?

$('input#namein').on('change', function(){

    var name = $('input#namein').val();
    if ($.trim(name) != '') {
        $.post('ajax/name.php', {name: name}, success = function(data) {

            var options = "";

            for(var i = 0; i < data.length; i++)
            {
                options += "<option value='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";            
            }

            $("div#name-data").append(options);

        });


    }

}); 

HTML:

<html>
    <head></head>
    <body> 
        Service user time Slots:
        <input type="text" id="namein" value="Name"> 
        Time Slots: 
        <form action="times" method=""> 
            <select id="name-data"></select> 
        </form> 
        <script src="js/jquery-1.12.4.min.js"></script> 
        <script src="js/golabl1.js"></script> 
    </body> 
</html>

3 ответа

  1. Добавьте это на страницу HTML :

    <select id="name-data"></select>
    

    И ваш JavaScript к этому :

    var name = $('input#namein').val();if ($.trim(name) != '') {
        $.post('ajax/name.php', {name: name}, success = function(data) {
    
            var options = "";
    
            for(var i = 0; i < data.length; i++)
            {
                options += "<option value='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";            
            }
    
            document.getElementById('name-data').innerHTML = options;
    
        });
    

    Надеюсь, это поможет!

  2. Переместите scriptтеги в голову, а затем измените разметку, чтобы селектор выглядел следующим образом:

    <select id="name-data" disabled="disabled"></select> 
    

    поэтому он отключен до тех пор, пока не будут загружены значения.Затем измените код внутриjs/golabl1.js, чтобы он настроил select сразу после завершения загрузки страницы:

    $(document).ready(function(){
        $.post('ajax/name.php', {name: name}, success = function(data) {
            var options = "";
            for(var i = 0; i < data.length; i++) {
               options += "<option value='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";
            }
            var selector = document.getElementById('name-data');
            selector.innerHTML = options;
            selector.removeAttribute('disabled'); //enable the selector again
        }
    });
    
  3. Ура ребята идут это, я использовал

    $( документ.) готово (функция() {

    console.log( "ready!" );
    
            $.post('ajax/name1.php', success = function(data) {
                    if (data != ''){
    $('#namein').append(data).show();
    

    }