javascript - 使用(表)执行多选列表的 jquery 程序时出现问题

Question

请不要重复我有一个代码请引用并告诉我哪里做错了大家好我有一个处理多选列表的程序我已经实现了这样的用户可以在左侧列表中添加或删除项目到右侧列表(“<”和“>”)的功能。这完全可以正常工作我再次添加了一个包含右侧的表(已选择此代码的列表值)是: HTML: 在这个“sourceHeaderFields”中包含我们选择列表添加到“sourceHeaderFields”的列表

<h2><strong>Select features from Seed data:</strong> </h2>
                <select id="sourceHeaderFields" name="sourceHeaderFields" multiple="multiple" 
                        style="width:210Px;height:150px;margin-left: 100px;">
                </select>
                <select id="sourceHeaderFields" name="targetHeaderFields" multiple="multiple" 
                        style="width:210Px; height:150px">
                </select>
            <br>
                <input type="button" id="leftall" value="<<" style="margin-left: 250px;"/>
                <input type="button" id="left" value="<" />
                <input type="button" id="right" value=">" />
                <input type="button" id="rightall" value=">>" />
            <br />
        <br></br> 

        <h2> <strong> Default Values for the Selected Headers: </strong> </h2>
            <table id="defaultValuesTable">
        </table>

JS

$(function () { 

    function moveItems(origin, dest) {
        $(origin).find(':selected').appendTo(dest);
    }
$('#left').click(function () {
        selectedValue1 = $('#targetHeaderFields').remove(':selected').val()
        //console.log(selectedValue1);
        moveItems('#targetHeaderFields', '#sourceHeaderFields');

        $("#defaultValuesTable").remove().append("<tr id='"+selectedValue+"'><td>" 
                                        +selectedValue+"</td><td><input type='text'></tr>");

    });

    $('#right').on('click', function () {
        selectedValue = $('#sourceHeaderFields').find(':selected').val()
        console.log(selectedValue);
        moveItems('#sourceHeaderFields', '#targetHeaderFields');
        debugger;
        //Populate the table with the field
        $("#defaultValuesTable").append("<tr id='"+selectedValue+"'><td>" 
                                        +selectedValue+"</td><td><input type='text'></tr>");


    });

Multilist 工作正常但问题是这一行:对于表列表****请使用此行进行实时代码工作: https://jsfiddle.net/8jbp47zq/不确定如何粘贴 csv 文件以获取列表

 $("#defaultValuesTable").remove().append("<tr id='"+selectedValue+"'><td>" 
                                        +selectedValue+"</td><td><input type='text'></tr>");

在这里，当我添加任何东西时，它会为带有相应列表名称的表格添加一个文本栏，但是当我删除它时，它不会一次一个地删除它全部删除...我想删除因为我尝试了很多方法，所以不是一次一张一张地列出:

//$("#defaultValuesTable").remove(id="+selectedValue1+");
and
//$("#defaultValuesTable").children("tr").remove();
and
//$("#defaultValuesTable").remove().append(id="+selectedValue1+");

这些都没有用，请帮忙..如果你们需要更多信息，请告诉我...我已经添加了一张网络用户界面的图片，请引用...thnx

Answer 1

删除过程出现问题。我已经更新了代码。

//A drop-down list
$(document).ready(function() {

  for (var i = 1970; i <= 2018; i++) {
    var fromYearSelect = document.getElementById("fromYear");
    var toYearSelect = document.getElementById("toYear");

    var option = document.createElement("OPTION");
    fromYearSelect.options.add(option);
    option.text = i;
    option.value = i;


    var option2 = document.createElement("OPTION");
    toYearSelect.options.add(option2);
    option2.text = i;
    option2.value = i;
  }
});

$(function() {

  function moveItems(origin, dest) {
    $(origin).find(':selected').appendTo(dest);
  }

  function moveAllItems(origin, dest) {
    $(origin).children().appendTo(dest);
  }

  $('#left').click(function() {
    debugger;
    selectedValue1 = $('#targetHeaderFields').remove(':selected').val()
    //console.log(selectedValue1);
    moveItems('#targetHeaderFields', '#sourceHeaderFields');

    debugger; // fixed below line. 
    $('#'+selectedValue1, "#defaultValuesTable").remove();
    //$("#defaultValuesTable").children("tr").remove();
    //$("#defaultValuesTable").remove().append(id="+selectedValue1+");

    // $("#defaultValuesTable").remove().append("<tr id='" + selectedValue + "'><td>" +
      // selectedValue + "</td><td><input type='text'></tr>");

  });

  $('#right').on('click', function() {
    selectedValue = $('#sourceHeaderFields').find(':selected').val()
    console.log(selectedValue);
    moveItems('#sourceHeaderFields', '#targetHeaderFields');
    debugger;
    //Populate the table with the field
    $("#defaultValuesTable").append("<tr id='" + selectedValue + "'><td>" +
      selectedValue + "</td><td><input type='text'></tr>");


  });

  $('#leftall').on('click', function() {
    moveAllItems('#targetHeaderFields', '#sourceHeaderFields');
  });

  $('#rightall').on('click', function() {
    moveAllItems('#sourceHeaderFields', '#targetHeaderFields');
  });

  $('#populateHeaderFields').on('click', function() {

    alert("Inside populate list");

    var files = ('#source_fileName').files;
    alert("Files Count - " + files);

  });

  $('#upload-form').on('change', function(evt) {
    //alert('File content changed');
    debugger;

    var filesCount = evt.target.files.length;
    for (i = 0; i < filesCount; i++) {
      var file = evt.target.files[i];
      if (file) {
        var reader = new FileReader();
        /*
        reader.onload = function(e) { 
            var contents = e.target.result;             
            var ct = reader.result;
            var words = ct.split(' ');            
        }
        reader.readAsText(file);
        */

        // Read our file to an ArrayBuffer
        reader.readAsArrayBuffer(file);

        // Handler for onloadend event.  Triggered each time the reading operation is completed (success or failure) 
        reader.onloadend = function(evt) {
          // Get the Array Buffer
          var data = evt.target.result;

          // Grab our byte length
          var byteLength = data.byteLength;

          // Convert to conventional array, so we can iterate though it
          var ui8a = new Uint8Array(data, 0);

          // Used to store each character that makes up CSV header
          var headerString = '';

          // Iterate through each character in our Array
          for (var i = 0; i < byteLength; i++) {
            // Get the character for the current iteration
            var char = String.fromCharCode(ui8a[i]);

            // Check if the char is a new line
            if (char.match(/[^\r\n]+/g) !== null) {

              // Not a new line so lets append it to our header string and keep processing
              headerString += char;

            } else {
              // We found a new line character, stop processing
              break;
            }
          }
          //Iterate through the list and populate the select element..
          $.each(headerString.split(","), function(i, e) {
            $("#sourceHeaderFields").append($("<option>", {
              text: e,
              value: e
            }));

          });
          //  if len(headerString)!= 1{
          // 	alert("headerString Donot match");
          // }else{
          console.log(headerString);
          console.log("Next Read");

        };
      } else {
        alert("Failed to load file");
      }
    }
  });
});

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title> upload </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link href="https://bootswatch.com/4/solar/bootstrap.min.css" rel="stylesheet" type="text/css">

  </head>

  <body>
    <div class="container">
      <div class="jumbotron">
        <div class="mx-auto" style="width:500px;">
          <h1>Large Data Generation</h1>
        </div>
      </div>
      <form id="upload-form" action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
        <div id="file-selector">
          <p>
            <strong>Source File: </strong>
            <input id="source_fileName" type="file" name="source_fileName" accept="csv/*" multiple style="
	    		margin-left: 10px;" />
          </p>
        </div>
        <br>
        <strong>Location Type:</strong>
        <input type="radio" name="target" value="BrowserDownload" checked>Browse Local
        <input type="radio" name="target" value="dumpToS3"> S3 Remote
        <br> </br>

        <h2><strong>Select features from Seed data:</strong> </h2>
        <select id="sourceHeaderFields" name="sourceHeaderFields" multiple="multiple" style="width:210Px;height:150px;margin-left: 100px;">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
			    </select>
        <select id="targetHeaderFields" name="targetHeaderFields" multiple="multiple" style="width:210Px; height:150px">
		    	</select>
        <br>
        <input type="button" id="leftall" value="<<" style="margin-left: 250px;" />
        <input type="button" id="left" value="<" />
        <input type="button" id="right" value=">" />
        <input type="button" id="rightall" value=">>" />
        <br />
        <br></br>
        <h2><strong>Default Values for the Selected Headers:</strong></h2>
        <table id="defaultValuesTable">
        </table>
        <br>
        <div>
          <br>
        </div>
        <div id="div_records">
          <strong>Record Count: </strong>
          <input id="records" type="text" name="records" value="1000" style="margin-left: 5px;">
          <br> <br> <br>
          <strong>From Year: </strong>
          <select id="fromYear" name="fromYear" style="margin-left: 30px;"></select>
          <strong style="margin-left:20px">To Year: </strong>
          <select id="toYear" name="toYear" style="margin-left: 5px;"></select>
          <br></br>
        </div>
        <br></br>
        <input type="submit" value="Generate Data" id="upload-button">
      </form>
    </div>
  </body>