Question

我正在尝试简化此代码并将其转换为jQuery语句。有人请告诉我如何使用jQuery简化此代码。这允许用户从选择中选择多个选项并显示在文本区域中选择的选项。

// JS for Showing Chosen Locations in textarea
    var opts = document.querySelectorAll('#loc option');

    document.getElementById('add').addEventListener('click', function() {
        for ( var i=0; i<opts.length; i++ ) {
            opts[i].selected = true;
        }

        reflectChange();
    });

    document.getElementById('rem').addEventListener('click', function() {
        for ( var i=0; i<opts.length; i++ ) {
            opts[i].selected = false;
        }

        reflectChange();
    });

    document.getElementById('loc').addEventListener('change', reflectChange);

    function reflectChange() {
        document.getElementById('selected').value = '';

        for ( var i=0; i<opts.length; i++ ) {
            if(opts[i].selected)
            document.getElementById('selected').value += opts[i].text+'\n';
        }
    }

    // End JS for Showing Chosen Locations in textarea

    // JS for Showing Chosen Associates in textarea
    var opts1 = document.querySelectorAll('#EmployeeName option');

    document.getElementById('add1').addEventListener('click', function() {
        for ( var i=0; i<opts1.length; i++ ) {
            opts1[i].selected = true;
        }

        reflectChange1();
    });

    document.getElementById('rem1').addEventListener('click', function() {
        for ( var i=0; i<opts1.length; i++ ) {
            opts1[i].selected = false;
        }

        reflectChange1();
    });

    document.getElementById('EmployeeName').addEventListener('change', reflectChange1);

    function reflectChange1() {
        document.getElementById('selected1').value = '';

        for ( var i=0; i<opts1.length; i++ ) {
            if(opts1[i].selected)
            document.getElementById('selected1').value += opts1[i].text+'\n';
        }
    }

    // End JS for Showing Chosen Associates in textarea

非常感谢任何帮助。

Answer 1

正如我在评论中提到的，此代码的目的尚不清楚。代码的简单性取决于用例，因为只有一个人可以决定写什么。

然而，我试图用jQuery理解和简化代码。请参阅以下代码段：

// JS for Showing Chosen Locations in textarea

// Listens to the changes in #loc. Prepares the selected elements, and sets the result in
// #selected.
$("#loc").change(function() {
  var selected = [];

  $(this).find("option:selected").each(function() {
    selected.push($(this).text());
  });

  $("#selected").val(selected.join("\n"));
});

// Selects all the options, and manually triggers the change() of #loc
$("#add").click(function() {
  var loc = $("#loc");
  loc.find("option").prop("selected", true);
  loc.change();
});

// Deselects all the options, and manually triggers the change() of #loc
$("#rem").click(function() {
  var loc = $("#loc");
  loc.find("option").prop("selected", false);
  loc.change();
});
// End JS for Showing Chosen Locations in textarea

// JS for Showing Chosen Associates in textarea

// Listens to the changes in #EmployeeName. Prepares the selected elements, and sets the 
// result in #selected1.
$("#EmployeeName").change(function() {
  var selected = [];

  $(this).find("option:selected").each(function() {
    selected.push($(this).text());
  });

  $("#selected1").val(selected.join("\n"));
});

// Selects all the options, and manually triggers the change() of #EmployeeName
$("#add1").click(function() {
  var emps = $("#EmployeeName");
  emps.find("option").prop("selected", true);
  emps.change();
});

// Deselects all the options, and manually triggers the change() of #EmployeeName
$("#rem1").click(function() {
  var emps = $("#EmployeeName");
  emps.find("option").prop("selected", false);
  emps.change();
});
// End JS for Showing Chosen Associates in textarea

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="selected" cols="30" rows="10"></textarea>

<select id="loc" multiple>
  <option>loc1</option>
  <option>loc2</option>
  <option>loc3</option>
</select>

<button id="add">Add</button>
<button id="rem">Remove</button>

<hr>

<textarea id="selected1" cols="30" rows="10"></textarea>

<select id="EmployeeName" multiple>
  <option>emp1</option>
  <option>emp2</option>
  <option>emp3</option>
</select>

<button id="add1">Add</button>
<button id="rem1">Remove</button>

JavaScript到jQuery代码转换

2 个答案: