複数のデータリストにテキスト値を入力し、それらを削除するオプションがありますか？

-1

私はユーザーがモデル番号を入力する入力テキストボックスを持っており、ユーザーが追加ボタンをクリックするとモデル番号が複数のデータリストに表示される必要があります。また、複数のデータリストで選択されたモデル番号を削除するオプションが必要です。私は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>

すべてのヘルプは理解されるであろう。

出典

2017-03-11 Jay Star

'$（"＃ddModNo "）' ?? –

また、 '$（function（）{'はDOMの準備が整っているので、DOM内にDOMをネストする必要はありません） '$（document）.ready（function（））{' –

' cnt ++ 'ここで' cnt'を定義しましたか？ –

これはうまくいくはずです。私はここであなたのために解決策を更新しましたUpdated Solution

$(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(); 
      }); 
     }); 

    });

出典

2017-03-13 02:34:22 King

ありがとう@キング、私はもはや削除ボタンが途中ではありません。ありがとうございました –

私は助けてうれしいです。 javaスクリプトの詳細については、https://www.w3schools.com/js/default.aspおよびjquery here https://www.w3schools.com/jquery/default.aspを参照してください。初心者です。これはあなたに大いに役立ちます。 – King

リンクをありがとう –

複数のデータリストにテキスト値を入力し、それらを削除するオプションがありますか？

答えて

関連する問題