Javascript 将文本值输入到多个数据列表中，是否有删除它们的选项？_Javascript_Jquery_Html

Javascript 将文本值输入到多个数据列表中，是否有删除它们的选项？

javascript jquery html

Javascript 将文本值输入到多个数据列表中，是否有删除它们的选项？,javascript,jquery,html,Javascript,Jquery,Html,我有一个输入文本框，用户在其中输入型号，当用户单击“添加”按钮时，型号必须显示在多个数据列表中。用户还必须具有删除多个数据列表中选定型号的选项。我已经创建了HTML代码和Javascript代码，但是Javascript没有添加解决我的问题最好的方法是什么？我是javascript的新手嘿，这是我的代码： <html lang=en> <head> <title>Add To Datalist</title> <meta charset=

我有一个输入文本框，用户在其中输入型号，当用户单击“添加”按钮时，型号必须显示在多个数据列表中。用户还必须具有删除多个数据列表中选定型号的选项。我已经创建了HTML代码和Javascript代码，但是Javascript没有添加

解决我的问题最好的方法是什么？我是javascript的新手

嘿，这是我的代码：

<html lang=en>
<head>
<title>Add To Datalist</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="bootstrap_3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap_3.3.7/fonts/font-awesome.min.css" rel="stylesheet" >
</head>
    <body>
        <div class="container">
            <div class="content">
                <br/>
                <div class="col-sm-6">
                <legend>Compatible Devices </legend>
                    <input type="text" class="form-control" id="modelNo" name="modelNo" placeholder="Enter Name Here"><br/>
                    <a href="javascript:void(0);" id="addModNo"><button class="btn btn-info">Add </button></a>
                    <a href="javascript:void(0);" id="removeModNo"><button class="btn btn-danger">Remove</button></a>   
                </div>
                <div class="col-sm-6"> 
                    <div class="listfromPopulatedModelNumber" id="listfromPopulatedModelNumber">                                                
                        <select id="listfromPopulatedModelNo" multiple="multiple" col=10 rows=10>
                                <option></option>
                                <option></option>
                                <option></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </body>


添加到数据列表


兼容设备

JavaScript代码：

   <script type="text/javascript">
    $(document)
            .ready(
                    function() {
                        var count = 2;
                        $("#addModNo")
                                .click(
                                        function() {
                                            $('#listfromPopulatedModelNo')
                                                    .last()
                                                    .after(
                                                            '#modelNo');
                                            count++;
                                        });
                        $("#removeModNo").click(function() {                            
                            $('#modelNumber > option:selected').remove();
                            count--;
                        });
                    });
</script>


$（文件）
.准备好了吗(
函数（）{
var计数=2；
$（“#addModNo”）
.点击(
函数（）{
$（“#listfromPopulatedModelNo”）
.last（）
.之后(
“#modelNo”）；
计数++；
});
$（“#removeModNo”）。单击（函数（）{
$（'#modelNumber>选项：选中'）。删除（）；
计数--；
});
});

非常感谢您的帮助。

这对您来说应该很有用。我在这里为您更新了解决方案

$（文档）.ready（函数（）{
$（'#addModNo'）。单击（函数（）{
var input=$（“input[name='modelNo']”）val（）；
控制台日志（输入）；
$（'#listfromPopulatedModelNo'）。追加（“+input+”）；
});
$（'#removeModNo'）。单击（函数（）{
$（'option:selected'）。每个（函数（）{
var input=$（“input[name='modelNo']”）val（）；
$（'#listfromPopulatedModelNo'）。追加（“+input+”）；
$（this.remove（）；
});
});
});

$（“#ddModNo”）

？？请检查您自己的代码并修复您需要的内容，因此

$（function（）{

是DOM ready的缩写，不需要将DOM ready嵌套在DOM ready

$（文档）中。ready（function（）{

cnt++

你在哪里定义了

cnt

？谢谢，@Roko我看到我输入了错误的id。我修复了它，但仍然不走运。打开开发者控制台，控制台从今天起应该是你最好的朋友，阅读它抛出的错误，修复它们。谢谢@King，顺便说一句，我不再是删除按钮了。谢谢，很高兴我帮了你。你应该这么做在这里了解更多关于java脚本和jquery的信息。您是一名初学者。这将对您有很大帮助。再次感谢您提供的链接

   $(document).ready(function(){

       $('#addModNo').click( function(){
                var input = $("input[name='modelNo']").val();
                 console.log(input);
                $('#listfromPopulatedModelNo').append("<option value='"+$(this).val()+"'>"+ input +"</option>");

         });

         $('#removeModNo').click(function(){
            $('option:selected').each( function() {
                var input = $("input[name='modelNo']").val();
                $('#listfromPopulatedModelNo').append("<option value='"+$(this).val()+"'>"+ input +"</option>");
                $(this).remove();
            });
        });

    });