목록에서 다른 목록으로 선택하는 HTML 코드

나는 HTML로 많은 작업을하지는 않지만 한 목록에서 다른 목록으로 선택할 수있는 두 목록이 있어야합니다. 같은 : 난 그냥 내 실수가 무엇인지 보이지 않아요목록에서 다른 목록으로 선택하는 HTML 코드

<!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>

enter image description here

이 HTML 코드 그러나 다른 하나의 목록에서 선택 작동하지 않습니다이다. 어떤 제안이라도 환영받을 것입니다. 우선은 document.ready

출처

2013-03-15 Darth Blue Ray

예를 들어 내가 첫 번째 단계는 단계별로 jQuery 코드 단계를 디버깅하는 것입니다라고 말하고 싶지만를 찾을 수 있습니다. '$ ('# select2 옵션 : selected')'이 실제로 객체를 찾습니까? –

콘솔 메시지? '.ready (')를 처음부터 제거하고 코드에 jQuery 라이브러리를 추가하면 역시 발생합니다. – mplungjan

@PSR에서 언급 한대로 document.ready를 사용하면됩니다 .fidde는 http://jsfiddle.net/FWXTn/ – DevelopmentIsMyPassion

사용하면 jQuery를 파일을 포함하지 않았다

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

을 넣어

$(document).ready(function()

시도로 교체 잘못된 코드

$().ready(function()

를 배치했다.

다음 코드를 사용하여 옵션을 제거하고 추가하십시오.

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

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

출처

2013-03-15 13:06:14 PSR

을 참조하십시오. 전에도 $()가 준비되어있는 것을 보았습니다 ... 작동하지 않을 수도 있습니다 ... – mplungjan

@mplungjan : 예, 작동한다고 생각합니다. '$ .fn.ready'는'this' 객체를 고려하지 않고 반환합니다. . –

물론 : 나는 jQuery 파일을 포함하지 않았다. 바보 같은 소리! 많이 들었어, 그냥 보지 못 했어. –

-1

당신은 작동 여기 http://www.bootply.com/126254

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

 
$('.remove').click(function(){ 
 
    $('.all').prop("checked",false); 
 
    var items = $("#list2 input:checked:not('.all')"); 
 
\t 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){ 
 
\t e.stopPropagation(); 
 
\t var $this = $(this); 
 
    if($this.is(":checked")) { 
 
    \t $this.parents('.list-group').find("[type=checkbox]").prop("checked",true); 
 
    } 
 
    else { 
 
    \t $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(); 
 
    
 
    \t var $this = $(this).find("[type=checkbox]"); 
 
    if($this.is(":checked")) { 
 
    \t $this.prop("checked",false); 
 
    } 
 
    else { 
 
    \t $this.prop("checked",true); 
 
    } 
 
    
 
    if ($this.hasClass("all")) { 
 
    \t $this.trigger('click'); 
 
    } 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/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> 
 
    \t \t <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"> 
 
     \t \t <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"> 
 
    \t <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>

출처

2017-04-13 08:25:21 Pahomi

목록에서 다른 목록으로 선택하는 HTML 코드

답변

관련 문제