Question

我正在使用两个选择元素，这个想法是当客户在select1中选择多个项目时，它们将被放置在select2中。这适用于单个项目，但是当我选择多个项目时，它们全部显示在一行中，而项目上没有分隔。

如果有人帮助我，我将不胜感激。我已经发布了我正在使用的jQuery，但是如果你还需要HTML，那么我将发布。非常感谢

HTML

<?php
    $conn = mysql_connect("localhost","root","");
    mysql_select_db("sample",$conn); 
    $result = mysql_query("SELECT * FROM boxes where department = '{$_GET['dept']}'");
?>

    <select name="boxdest[]" id="boxdest" size="7" multiple="multiple">

<?php
    $i=0;
    while($row = mysql_fetch_array($result)) {
?>
    <option value="<?php echo $row["custref"];?>"><?php echo $row["custref"];?></option>
<?php
    $i++;
    }
?>
</select>

$("#submit2").click( function() {

    //alert('button clicked');

    $box1_value=$("#boxdest").val();
    $box1_text=$("#boxdest option:selected").text();
    $("#boxdest2").append('<option value="'+$box1_value+'">'+$box1_text+'</option>');
    $("#boxdest option:selected").remove();

});

Answer 1

试试这个：

$(document).ready(function () {
  // initial list, as fetched from the server
  var initialList = $('#boxdest > option')
    .map(function () { return this.value; }).get();

  /**
   * @param {string} source
   * @param {string} destination
   */
  function exchangeLists(source, destination) {
    // find all selected items on the source list
    var selected = $(source + ' > option:selected');

    // move them to the destination list
    $(destination).append(selected.clone());

    // remove from the source list
    selected.remove();

    // sort the destination list
    var list = $(destination + ' > option').clone().sort(function (a, b) {
      if (initialList.indexOf(a.value) < initialList.indexOf(b.value)) {
        return -1;
      }

      if (initialList.indexOf(a.value) > initialList.indexOf(b.value)) {
        return 1;
      }

      return 0;
    });

    // replace current destination list with the sorted one
    $(destination).empty().append(list);
  }

  $('#submit2').click(function () {
    exchangeLists('#boxdest', '#boxdest2');
  });

  $('#submit3').click(function () {
    exchangeLists('#boxdest2', '#boxdest');
  });
});

Answer 2

You can build a comma-separate list of the option labels like this:

$box1_text = $("#boxdest option:selected").map(function() {
  return $(this).text();
}).get().join(", ");

That extracts each <option> label separately (via .map()), and then joins them together.

The .get() call is necessary to convert the jQuery object that's returned from .map() into a plain array containing all the option labels.

逗号分隔jQuery

2 个答案: