Javascript 请在运行中创建multi-select_Javascript_Jquery_Jquery Ui

Javascript 请在运行中创建multi-select

javascript jquery jquery-ui

Javascript 请在运行中创建multi-select,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我已经尝试了一段时间，我需要动态创建多选输入，以下是我的方法：拜托，我该怎么办 Tks提前 <!DOCTYPE html> <html lang="pt-br"> <head> <title>Pizzaria - Dei Trulli</title> <meta charset="iso-8859-1" /> <meta name="viewport" content="width=device-width, in

我已经尝试了一段时间，我需要动态创建多选输入，以下是我的方法：

拜托，我该怎么办

Tks提前

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Pizzaria - Dei Trulli</title>
<meta charset="iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link href="bootstrap.min.css" rel="stylesheet">
<link href="magicsuggest.css" rel="stylesheet">


<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="magicsuggest.js"></script>
</head>
<body>


                        <p class="lead"><div id="ms1" class="form-control" value='["Chicago","Houston"]'></div></p>


<a id="AddMoreFileBox" class="btn btn-info" href="#"> + Mais uma pizza </a>

<div id="InputsWrapper">

    <div>
        <input id="field_1" type="text" value="Text 1" name="mytext[]"></input>
        <a class="removeclass" href="#"> × </a>
    </div>
</div>










<script type="text/javascript">
$(document).ready(function() {

    var MaxInputs       = 8; //maximum input boxes allowed
    var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton       = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount=1; //to keep track of text box added

    $(AddButton).click(function (e)  //on add input button click
    {
            if(x <= MaxInputs) //max input box allowed
            {
                FieldCount++; //text box added increment
                //add input box
                //$(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass">&times;</a></div>');
                $(InputsWrapper).append('<div><p class="lead2"><div id="ms2" class="form-control" value=""></div></p><a href="#" class="removeclass">&times;</a></div>');


                x++; //text box increment
            }
    return false;
    });

    $("body").on("click",".removeclass", function(e){ //user click on remove text
            if( x > 1 ) {
                    $(this).parent('div').remove(); //remove text box
                    x--; //decrement textbox
            }
    return false;
    })

    });





$(function() {
    $('.lead').each(function () {
        var ms = $(this).magicSuggest({data : [ 'New York', 'Los Angeles', 'Chicago', 'Houston',
                                                'Philadelphia', 'Phoenix', 'San Antonio',
                                                'San Diego', 'Dallas', 'San Jose', 'Jacksonville' ],
        name: 'sabores'
        });
    });
});


$(function() {
    $('#ms2').eac   h(function () {
        var ms = $(this).magicSuggest({data : [ 'New York', 'Los Angeles', 'Chicago', 'Houston',
                                                'Philadelphia', 'Phoenix', 'San Antonio',
                                                'San Diego', 'Dallas', 'San Jose', 'Jacksonville' ],
       name: 'bebidas'
            });
    });
});



</script>
</body>
</html>


特鲁利比萨酒店

$（文档）.ready（函数（）{
var MaxInputs=8；//允许的最大输入框数
var InputsWrapper=$（“#InputsWrapper”）；//输入框包装器ID
var AddButton=$（“#AddMoreFileBox”）；//添加按钮ID
var x=inputswraper.length；//initlal文本框计数
var FieldCount=1；//跟踪添加的文本框
$（添加按钮）。单击（函数（e）//在添加输入按钮上单击
{
if（x1）{
$（this）.parent（'div'）.remove（）；//删除文本框
x--；//减量文本框
}
返回false；
})
});
$（函数（）{
$（'.lead'）。每个（函数（）{
var ms=$（this）.magicssuggest（{数据：['纽约'，'洛杉矶'，'芝加哥'，'休斯顿'，
“费城”、“凤凰城”、“圣安东尼奥”，
“圣地亚哥”、“达拉斯”、“圣何塞”、“杰克逊维尔”]，
姓名：“萨博里斯”
});
});
});
$（函数（）{
$（'#ms2'）.eac h（函数（）{
var ms=$（this）.magicssuggest（{数据：['纽约'，'洛杉矶'，'芝加哥'，'休斯顿'，
“费城”、“凤凰城”、“圣安东尼奥”，
“圣地亚哥”、“达拉斯”、“圣何塞”、“杰克逊维尔”]，
名称：“比比达斯”
});
});
});

并且不会添加带有多选功能的新按钮，请帮助，我是这里的新手，tks解决了这个问题，非常感谢

这就是神奇之处：

 var addButtonS     = $("#addMoreFileBoxSabor")
 $(addButtonS).click (function (e) {
  if (inputsWrapper.children().length <= maxInputs) {
    var new_dropdown = document.createElement ('p')
    new_dropdown.className = 'lead'
    new_dropdown.innerHTML = '<div class="form-control" value=""></div>'
    //data_set.name = "sabores" + inputsWrapper.get(0).childNodes.length
    inputsWrapper.append (new_dropdown)
    console.log (data_set_sabor.name)
    $(new_dropdown).magicSuggest(data_set_sabor)
   }
  return false
 })

var addButtonS=$（“#addMoreFileBoxSabor”）
$（添加按钮）。单击（功能（e）{
if（inputswraper.children（）.length发布一些代码而不仅仅是一个链接有什么特别的问题？请发布一个你遇到问题的代码的最简单的具体示例和问题的描述我已经发布了所有我尝试过的链接，打开链接你会看到我停在哪里请，它不会正确添加选择，不确定原因：TksPlease take a loo你应该在你的问题中发布你的代码。考虑到你现在已经链接了两次，我很想把它当作垃圾邮件。迈克，很抱歉第二个链接，但是打开链接并查看代码有什么错？我如何将所有代码发布在这里？都在链接中，没有错误