Как выбрать значение в списке и клонировать его с меткой optgroup в другой список - PullRequest
Новая
       31

Как выбрать значение в списке и клонировать его с меткой optgroup в другой список

0 голосов
/ 05 января 2019

В настоящее время я работаю над кодом, в котором есть два списка с группами опций, связанных с каждым элементом. Что мне нужно, так это то, что когда я щелкаю значение в listbox1, значение и его optgroup клонируются в listbox2. Проблема в том, что я не знаю, как выбрать текущую optgroup. При нажатии на значение, как я могу проверить, существует ли текущая optgroup в listbox2, если он выходит, просто добавьте значение и если он не добавляет значение и его внешнюю группу. Таким же образом, если при нажатии на это значение в listbox1 остается только одно значение, это и его optgroup удаляются из listbox1.

Я нашел этот код на этом форуме, и я пытался адаптировать его, чтобы делать то, что мне нужно, но я обходился без какой-либо удачи.

Буду признателен за любую помощь в решении этого вопроса.

Это код, который я использую: 

$(document).ready(function() {
   
	$("#lstBox1").click(function () {
		 var selectedOp1 = $('#lstBox1 option:selected');
		 if($('#lstBox2 optgroup[label=Cars]').html() == null){
		   $('#lstBox2').append('<optgroup label="Cars"></optgroup>');
           $('#lstBox2 optgroup[label=Cars]').append($(selectedOp1).clone());
        } else {
           $('#lstBox2 optgroup[label=Cars]').append($(selectedOp1).clone());
        }
		 
        $(selectedOp1).remove();
    });

    $("#lstBox2").click(function () {
		 var selectedOp2 = $('#lstBox2 option:selected');
		 $('#lstBox1').append($(selectedOp2).clone());
        $(selectedOp2).remove();
    });	
	
	
});
#lstBox1 {
	width: 200px;
	height: 300px;
	
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 8px;
  padding: 5px;
  overflow-y: auto;

}
#lstBox2 {
  width: 200px;
  height: 300px;
  border-radius: 8px;
  border-color: #58A0DC;
  padding: 5px;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select multiple="multiple" id='lstBox1'>

    <optgroup label="Cars">             
    <option value="40">Toyota</option>
    <option value="44">Ford</option>
    <option value="43">Kia</option>
    <option value="42">BMW</option>

    <optgroup label="Mortorcycle">
    <option value="16">Kawasaki</option>
    <option value="31">Suzuki</option>
    <option value="17">Yamaha</option>
    </select>



    <select multiple="multiple" id='lstBox2'>

    </select>
$(document).ready(function() {

$("#lstBox1").click(function () {
     var selectedOp1 = $('#lstBox1 option:selected');

     if($('#lstBox2 optgroup[label=Cars]').html() == null){
       $('#lstBox2').append('<optgroup label="Cars"></optgroup>');
       $('#lstBox2 optgroup[label=Cars]').append($(selectedOp1).clone());
    } else {
       $('#lstBox2 optgroup[label=Cars]').append($(selectedOp1).clone());
    }

    $(selectedOp1).remove();
});

$("#lstBox2").click(function () {
     var selectedOp2 = $('#lstBox2 option:selected');
     $('#lstBox1').append($(selectedOp2).clone());
    $(selectedOp2).remove();
}); 


});
...