如何使用jQuery和PHP在HTML中创建多选下拉列表？ [英] How to create a Multi-Select Dropdown in HTML using jQuery and PHP?

问题描述

<script>
jQuery(document).ready(function()
{
    jQuery.ajax(
    {
        type: 'GET',
        url: 'specificationTypes.php',
        dataType: 'JSON',
        success:function(data)
        {
                    for(i=0;i<jQuery(data).length;i++)

            {

                $('#specificationType').append('<option value = '+ data[i].specification_type_id+'>' + data[i].specification_type_name + '</option>');
            }
        }
    });
});
</script>

<script>
jQuery(document).ready(function()
{
    jQuery('#specificationType').change(function()
        {
            var specificationType = jQuery("#specificationType").val();

            var jsonString = JSON.stringify(specificationType);

            jQuery.ajax(
            {
                type:"POST",
                url:"specifications.php",
                data: {data : jsonString},
                cache: false,
                success:function(data)
                {
                    for(i=0;i<jQuery(data).length;i++)

                    {

                        jQuery("#specifications").append('<option value = '+ data[i].project_specification_details+'>' + data[i].project_specification_details + '</option>');

                        console.log('success');
                    }
                }
            });
    });
});
</script>

我的.php文件

my .php file

<?php
    mysql_connect("localhost","root","myfourwalls");

    mysql_select_db("new_project");

    $specificationType = json_decode(stripslashes($_POST['data']));
    $result = mysql_query("SELECT DISTINCT project_specification_details FROM project_specifications WHERE project_specification_type IN(".implode(",",$specificationType).")");

    $specifications = array();

    while ($data = mysql_fetch_array($result,MYSQL_ASSOC)) {

    $data_array['project_specification_details'] = $row['$project_specification_details'];

    array_push($specifications,$data);
    }
    $data = json_encode($specifications);

    echo $data;
?>

我收到了JSON数据变量名为data但不能将其附加到UI。控制台中会出现一些错误。

I got the JSON data to the variable called data but cant append it to the UI.Some error is coming in the console.

推荐答案

（'＃specificationType'）。append（'< option value =' + data [i] .specification_type_id +' > '+ data [i] .specification_type_name +'< / option > '）;
}
}
}）;
}）;
< / script >

< script >
jQuery（document）.ready（function（）
{
jQuery（'＃specificationType'）。change（function（）
{
var specificationType = jQuery（＃specificationType）。val（）;

var jsonString = JSON.stringify（specificationType）;

jQuery.ajax（
{
类型：POST，
url：specifications.php，
数据：{data：jsonString}，
cache：false，
成功： function（data）
{
for（i = 0; i < jQuery（data） .length; i ++）

< span class =code-attribute> {

jQuery（＃specifications）。append（'< option 值 =' + data [i] .project_specification_details +' > '+ data [i] .project_specification_details +'< / option > ; '）;

console.log（'success'）;
}
}
}）;
}）;
}）;
< / script >

('#specificationType').append('<option value = '+ data[i].specification_type_id+'>' + data[i].specification_type_name + '</option>'); } } }); }); </script> <script> jQuery(document).ready(function() { jQuery('#specificationType').change(function() { var specificationType = jQuery("#specificationType").val(); var jsonString = JSON.stringify(specificationType); jQuery.ajax( { type:"POST", url:"specifications.php", data: {data : jsonString}, cache: false, success:function(data) { for(i=0;i<jQuery(data).length;i++) { jQuery("#specifications").append('<option value = '+ data[i].project_specification_details+'>' + data[i].project_specification_details + '</option>'); console.log('success'); } } }); }); }); </script>

我的.php文件

my .php file

<?php
    mysql_connect("localhost","root","myfourwalls");

    mysql_select_db("new_project");

    

specificationType = json_decode（stripslashes（

specificationType = json_decode(stripslashes(

_POST [' data']））;

_POST['data']));

这篇关于如何使用jQuery和PHP在HTML中创建多选下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！