javascript - Html code to select from list to other list not working

I'm not working much with html but I need to have two lists where I can select from one list to another. like :

this is the html code but the selection from one list to the other is not working :

<!DOCTYPE html>
<html>
<head>
<script>
$().ready(function() {  
   $('#add').click(function() {  
    return !$('#select1 option:selected').remove().appendTo('#select2');  
   });  
   $('#remove').click(function() {  
    return !$('#select2 option:selected').remove().appendTo('#select1');  
   });  
  });
</script>
<style type="text/css" media=screen>
a {  
   display: block;  
   border: 1px solid #aaa;  
   text-decoration: none;  
   background-color: #fafafa;  
   color: #123456;  
   margin: 2px;  
   clear:both;  
  }  
  div {  
   float:left;  
   text-align: center;  
   margin: 10px;  
  }  
  select {  
   width: 100px;  
   height: 80px;  
  } 
</style>
</head>
<body>

<div>  
  <select multiple id="select1">  
   <option value="1">Option 1</option>  
   <option value="2">Option 2</option>  
   <option value="3">Option 3</option>  
   <option value="4">Option 4</option>  
  </select>  
  <a href="#" id="add">add &gt;&gt;</a>  
 </div>  
 <div>  
  <select multiple id="select2"></select>  
  <a href="#" id="remove">&lt;&lt; remove</a>  
 </div>  

</body>
</html>

I'm just not seeing what my mistake is. Any suggestions would be wele.

I'm not working much with html but I need to have two lists where I can select from one list to another. like :

this is the html code but the selection from one list to the other is not working :

<!DOCTYPE html>
<html>
<head>
<script>
$().ready(function() {  
   $('#add').click(function() {  
    return !$('#select1 option:selected').remove().appendTo('#select2');  
   });  
   $('#remove').click(function() {  
    return !$('#select2 option:selected').remove().appendTo('#select1');  
   });  
  });
</script>
<style type="text/css" media=screen>
a {  
   display: block;  
   border: 1px solid #aaa;  
   text-decoration: none;  
   background-color: #fafafa;  
   color: #123456;  
   margin: 2px;  
   clear:both;  
  }  
  div {  
   float:left;  
   text-align: center;  
   margin: 10px;  
  }  
  select {  
   width: 100px;  
   height: 80px;  
  } 
</style>
</head>
<body>

<div>  
  <select multiple id="select1">  
   <option value="1">Option 1</option>  
   <option value="2">Option 2</option>  
   <option value="3">Option 3</option>  
   <option value="4">Option 4</option>  
  </select>  
  <a href="#" id="add">add &gt;&gt;</a>  
 </div>  
 <div>  
  <select multiple id="select2"></select>  
  <a href="#" id="remove">&lt;&lt; remove</a>  
 </div>  

</body>
</html>

I'm just not seeing what my mistake is. Any suggestions would be wele.

Share Improve this question asked Mar 15, 2013 at 13:04 Darth Blue Ray 9,75510 gold badges36 silver badges48 bronze badges

I'd say the first step is to debug the jQuery code step by step. Does $('#select2 option:selected') actually find an object? – Pekka Commented Mar 15, 2013 at 13:06
Console messages? and what happens if you remove ).ready( from the start and add the jQuery library to your code too – mplungjan Commented Mar 15, 2013 at 13:06
just use document.ready as mentioned by @PSR . see fidde here jsfiddle/FWXTn – DevelopmentIsMyPassion Commented Mar 15, 2013 at 13:12

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

use document.ready .you placed wrong code

replace

$().ready(function()

with

$(document).ready(function()

try to put

<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="http://code.jquery./ui/1.10.2/jquery-ui.js"></script>

you did not included jQuery files.

use the following code to remove and append options.

$('#select1:selected').each(function(i, selected) {
    $("#select2").append('<option 
     value='+$(selected).val()+'>'+$(selected).text()+'</option>');

    $(this).remove();  
});

You can find a working example here http://www.bootply./126254

$('.add').click(function(){
    $('.all').prop("checked",false);
    var items = $("#list1 input:checked:not('.all')");
    var n = items.length;
  	if (n > 0) {
      items.each(function(idx,item){
        var choice = $(item);
        choice.prop("checked",false);
        choice.parent().appendTo("#list2");
      });
  	}
    else {
  		alert("Choose an item from list 1");
    }
});

$('.remove').click(function(){
    $('.all').prop("checked",false);
    var items = $("#list2 input:checked:not('.all')");
	items.each(function(idx,item){
      var choice = $(item);
      choice.prop("checked",false);
      choice.parent().appendTo("#list1");
    });
});

/* toggle all checkboxes in group */
$('.all').click(function(e){
	e.stopPropagation();
	var $this = $(this);
    if($this.is(":checked")) {
    	$this.parents('.list-group').find("[type=checkbox]").prop("checked",true);
    }
    else {
    	$this.parents('.list-group').find("[type=checkbox]").prop("checked",false);
        $this.prop("checked",false);
    }
});

$('[type=checkbox]').click(function(e){
  e.stopPropagation();
});

/* toggle checkbox when list group item is clicked */
$('.list-group a').click(function(e){
  
    e.stopPropagation();
  
  	var $this = $(this).find("[type=checkbox]");
    if($this.is(":checked")) {
    	$this.prop("checked",false);
    }
    else {
    	$this.prop("checked",true);
    }
  
    if ($this.hasClass("all")) {
    	$this.trigger('click');
    }
});

.v-center {
  min-height:200px;
  display: flex;
  justify-content:center;
  flex-flow: column wrap;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
        <div class="col-md-12 text-center"><h3>Pick List Example</h3></div>
  		<div class="col-sm-4 col-sm-offset-1">
          <div class="list-group" id="list1">
          <a href="#" class="list-group-item active">List 1 <input title="toggle all" type="checkbox" class="all pull-right"></a>
          <a href="#" class="list-group-item">Second item <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">Third item <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">More item <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">Another <input type="checkbox" class="pull-right"></a>
          </div>
        </div>
        <div class="col-md-2 v-center">
     		<button title="Send to list 2" class="btn btn-default center-block add"><i class="glyphicon glyphicon-chevron-right"></i></button>
            <button title="Send to list 1" class="btn btn-default center-block remove"><i class="glyphicon glyphicon-chevron-left"></i></button>
        </div>
        <div class="col-sm-4">
    	  <div class="list-group" id="list2">
          <a href="#" class="list-group-item active">List 2 <input title="toggle all" type="checkbox" class="all pull-right"></a>
          <a href="#" class="list-group-item">Alpha <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">Charlie <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">Bravo <input type="checkbox" class="pull-right"></a>
          </div>
        </div>
  </div>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Html code to select from list to other list not working - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)