使用jquery填充下拉列表

时间:2016-05-24 21:12:56

标签: jquery html ajax

我正在尝试使用JQuery填充下拉列表但是像往常一样失败,我可以将数据显示在Div中但不会显示在下拉列表中

我有一个名称 - 数据的选择ID这里是JQuery代码,我在做什么做家伙?

$('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 个答案:

答案 0 :(得分:0)

将此内容添加到您的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;

    });

希望这有帮助!

答案 1 :(得分:0)

=> Errors executing Cordova commands: While running Cordova app for platform Android with options --device: Error: Command failed: C:\Users\ally\Documents\GitHub\Portal-Meteor\portalMeteor\.meteor\local\cordova-build\platforms\android\cordova\run --device --device FAILURE: Build failed with an exception. * What went wrong: Unable to start the daemon process. This problem might be caused by incorrect configuration of the daemon. For example, an unrecognized jvm option is used. Please refer to the user guide chapter on the daemon at http://gradle.org/docs/2.2.1/userguide/gradle_daemon.html Please read the following process output to find out more: ----------------------- Error occurred during initialization of VM Could not reserve enough space for object heap Error: Could not create the Java Virtual Machine. Error: A fatal exception has occurred. Program will exit. * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Error code 1 for command: cmd with args: /s,/c,"C:\Users\ally\Documents\GitHub\Portal-Meteor\portalMeteor\.meteor\local\cordova-build\platforms\android\gradle w cdvBuildDebug -b C:\Users\ally\Documents\GitHub\Portal-Meteor\portalMeteor\.meteor\local\cordova-build\platforms\android\build.gradle -PcdvBuildArch=arm -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true" undefined at ChildProcess.exitCallback (C:\tools\utils\processes.js:151:23) at ChildProcess.emit (events.js:98:17) at Process.ChildProcess._handle.onexit (child_process.js:820:12) C:\Users\ally\AppData\Local\.meteor\packages\meteor-tool\1.3.2_4\mt-os.windows.x86_32\isopackets\cordova-support\npm\nod e_modules\meteor\promise\node_modules\meteor-promise\promise_server.js:116 throw error; ^ ExitWithCode:1 标签移到您的头部,然后将选择器的标记更改为如下所示:

script

因此在加载值之前它已被禁用。然后更改<select id="name-data" disabled="disabled"></select> 内的代码,以便在页面加载完成后立即设置选择:

js/golabl1.js

答案 2 :(得分:0)

干杯伙计们,我用了

$(document).ready(function(){

console.log( "ready!" );

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

}