Захватить предметы, перемещенные в listBox на клике - PullRequest
Новая
       7

Захватить предметы, перемещенные в listBox на клике

0 голосов
/ 22 января 2020

Я использую javascript из этой скрипки:

http://jsfiddle.net/jquerybyexample/RbLVQ/?utm_source=website&utm_medium=embed&utm_campaign=RbLVQ

Пользователь может выбрать 1 или более элементов из первого списка и переместить их во второй список.

Я добавил кнопку, которая должна захватывать элементы во втором списке, но не может захватывать элементы, если они не «выбраны». В основном, они должны быть выделены, чтобы быть идентифицированными как выбранные.

javascript из скрипки (выше) не изменился: 

$(document).ready(function() {
  $('#btnRight').click(function(e) {
    var selectedOpts = $('#lstBox1 option:selected');
    if (selectedOpts.length == 0) {
        alert("Nothing to move.");
        e.preventDefault();
    }

    $('#lstBox2').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });

  $('#btnLeft').click(function(e) {
    var selectedOpts = $('#lstBox2 option:selected');
    if (selectedOpts.length == 0) {
        alert("Nothing to move.");
        e.preventDefault();
    }

    $('#lstBox1').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
});

Мой щелчок кнопки выглядит следующим образом: 

$('#massSubmit').on('click', function()
{
  var lstBox2 = $('#lstBox2').val();

  console.log('this is listbox ' + lstBox2);
});

За нажатие кнопки, если элементы во втором списке списка не выбраны, они не будут отображаться в консоли.

Как автоматически выбрать элементы во втором списке списка на Событие onClick?

1 Ответ

1 голос
/ 22 января 2020

Проверьте это решение

html

 <table style='width:370px;'>
    <tr>
        <td style='width:160px;'>
            <b>Group 1:</b><br/>
           <select multiple="multiple" id='lstBox1'>
              <option value="ajax">Ajax</option>
              <option value="jquery">jQuery</option>
              <option value="javascript">JavaScript</option>
              <option value="mootool">MooTools</option>
              <option value="prototype">Prototype</option>
              <option value="dojo">Dojo</option>
        </select>
    </td>
    <td style='width:50px;text-align:center;vertical-align:middle;'>
        <input type='button' id='btnRight' value ='  >  '/>
        <br/><input type='button' id='btnLeft' value ='  <  '/>
        <br/><input type='button' id='btnAllLeft' value ='  <<  '/>
        <br/><input type='button' id='btnAllRight' value ='  >> '/>
    </td>
    <td style='width:160px;'>
        <b>Group 2: </b><br/>
        <select multiple="multiple" id='lstBox2'>
          <option value="asp">ASP.NET</option>
          <option value="c#">C#</option>
          <option value="vb">VB.NET</option>
          <option value="java">Java</option>
          <option value="php">PHP</option>
          <option value="python">Python</option>  
        </select>
    </td>
</tr>
</table>

<button type="button" class="btn btn-primary btn-flat" id="massSubmit" name="massSubmit">Save</button>

js

$(document).ready(function() {
    $('#btnRight').click(function(e) {
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox2').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

    $('#btnLeft').click(function(e) {
        var selectedOpts = $('#lstBox2 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

     $('#btnAllLeft').click(function(e) {
        var selectedOpts = $('#lstBox2 option');
        if (selectedOpts.length === 0) {
           e.preventDefault();
        }

        $('#lstBox1').append(selectedOpts);
        e.preventDefault();
    });

    $('#btnAllRight').click(function(e) {
        var selectedOpts = $('#lstBox1 option');
        if (selectedOpts.length === 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox2').append(selectedOpts);
        e.preventDefault();
    });
});

$('#massSubmit').on('click', function()
{
 var lstBox2 = $('#lstBox2').val();
 if(!lstBox2) {
   var value = "";
   $('#lstBox2 option').each((index,element) => {
      value += $(element).attr('value') + ",";
   });
   lstBox2 = value;
   console.log("value-->"+value);
 } 
 console.log('this is listbox ' + lstBox2);

});

css 

  body
{
    padding:10px;
    font-family:verdana;
    font-size:8pt;
}

select
{
    font-family:verdana;
    font-size:8pt;
    width : 150px;
    height:100px;
}
input
{
    text-align: center;
    v-align: middle;
}
...