ブートストラップを選択jqueryの</p> <p>サンプルあなたは私を助けることができる私はそれを持って

<div class="form-group col-md-2"> 
    {{ Form::label('from', null, ['class' => 'control-label']) }} 
    <select name="from" class="selectpicker form-control mySel" multiple data-max-options="1" data-live-search="true" required="true"> 
     <option value="1">Airport</option> 
    </select> 
</div> 
<div class="form-group col-md-1"> 
    <input type="button" value="swap" id="swap"> 
</div> 
<div class="form-group col-md-2"> 
    {{ Form::label('to', null, ['class' => 'control-label']) }} 
    <select name="to" class="selectpicker form-control mySel" multiple data-max-options="1" data-live-search="true" required="true"> 
     @foreach($services as $key => $value) 
     <option value="{{$value->id}}">{{ $value->location }}</option> 
     @endforeach 
    </select> 
</div>

をクリックして、私は動的に付いたボタンとjQueryで、それを選択し、逆のすべての値にしたいボタンを持つ2つのselectタグにすべてをしてくださいスワップ私はボタンをクリックすると、すべてのオプションを選択したになりますが、私はhttps://codepen.io/anon/pen/KvPREOをリンクcodepenのようにブートストラップを選択jqueryの</p> <p>サンプルあなたは私を助けることができる私はそれを持って

出典

2017-07-22 Muhammed Melih TOY

ですから、二番目のすべてのエントリを持つ最初のもののすべての 'selected'エントリをスワップしたいですか？たぶん正確に何を求めているのかを明確にしてください –

選択済みか非選択かは重要ではありません。私は全体のオプションを変更したい –

各選択の子を変数にクローンして置き換えることはできませんか？ –

を選択し、「から」に移動します、ここでのコードは次のとおりです。

HTML：

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> 
</head> 
<body> 

<div class="wrapper"> 
    <div id="select-from-container" class="form-group col-md-2"> 
    <select class="selectpicker form-control mySel" multiple data-max-options="1" required="true"> 
     <option value="1">Airport</option> 
    </select> 
    </div> 

    <div class="form-group col-md-1"> 
    <input type="button" value="Swap" id="swap"> 
    </div> 

    <div id="select-to-container" class="form-group col-md-2"> 
    <select class="selectpicker form-control mySel" multiple data-max-options="1" required="true"> 
     <option value="1">A</option> 
     <option value="2">B</option> 
     <option value="3">C</option> 
     <option value="4">D</option> 
    </select> 
    </div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

Javascriptを：

$('#select-to-container select').selectpicker(); 
$('#select-from-container select').selectpicker(); 

$('#swap').on('click', function(){ 
    // get current selections 
    select_to_value = $('#select-to-container select').val() 
    select_from_value = $('#select-from-container select').val() 

    // Copying selects 
    select_to = $('#select-to-container select').clone(); 
    select_from = $('#select-from-container select').clone(); 

    // taking original names 
    select_to_name = $('#select-to-container select').prop('name'); 
    select_from_name = $('#select-from-container select').prop('name'); 

    // cleaning up 
    $('#select-to-container').html(''); 
    $('#select-from-container').html(''); 

    // add selects again 
    $('#select-to-container').html(select_from); 
    $('#select-to-container select').prop('name',select_to_name); 

    $('#select-from-container').html(select_to); 
    $('#select-from-container select').prop('name',select_from_name); 

    // re-bind selectpicker 
    $('#select-to-container select').selectpicker(); 
    $('#select-from-container select').selectpicker(); 

    // re-select original selections 
    $('#select-to-container select').val(select_from_value); 
    $('#select-from-container select').val(select_to_value); 

    // refresh selectpicker to show the selected values 
    $('.selectpicker').selectpicker('refresh'); 
});

出典

2017-07-22 16:38:07

私のラベルは消えています。 –

申し訳ありませんが、あなたのラベルはわかりません。 –

それは私のせいだった私は同じdivラベルと選択を入れてはならない –

ブートストラップを選択jqueryの</p> <p>サンプルあなたは私を助けることができる私はそれを持って

答えて

関連する問題