Question

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

http://pizzariadomcattione.com.br/addbut/

拜托，我该怎么做？

事先提前!!!

<!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>

并且不会添加带有多重选择的新按钮，请帮助，我在这里有点新鲜，tks

Answer 1

解决了它，非常感谢

http://jsfiddle.net/PM5Fq/19/

这就是魔术：

 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
 })

请立即创建多选

1 个答案: