Как удалить выбранную опцию из выбора HTML? - PullRequest
Новая
       1

Как удалить выбранную опцию из выбора HTML?

1 голос
/ 19 ноября 2011

Мой настоящий вопрос довольно сложен по сравнению с его названием. Я очень новичок в javascript и jquery, поэтому, пожалуйста, потерпите меня.

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

<html>
<head>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript" > 
var selectedAddFootballPlayerId = '';
var selectedAddFootballPlayerName = '';
var selectedRemoveFootballPlayerId = '';
var selectedRemoveFootballPlayerName = '';

$(document).ready(function() {
 $('#listboxFootballPlayers option').click(function() {
  selectedAddFootballPlayerId = $(this).attr('value');
  selectedAddFootballPlayerName = $(this).text();
 });

 $('#selectedFootballPlayers option').click(function() {
  selectedRemoveFootballPlayerId = $(this).attr('value');
  selectedRemoveFootballPlayerName = $(this).text();
 });

 $('input#btnAddFootballPlayerToList').click(function() {
  if (selectedAddFootballPlayerId == '') {
   alert("Select a football player to be added from the list.");
  } else {
   var option = new Option(selectedAddFootballPlayerName , selectedAddFootballPlayerId);
   $(option).html(selectedAddFootballPlayerName); 
   $('#selectedFootballPlayers').append(option);
   selectedAddFootballPlayerId = '';
   selectedAddFootballPlayerName = '';
  }
 });

 $('input#btnRemoveFootballPlayerFromList').click(function() {
  if (selectedRemoveFootballPlayerId == '') {
   alert("Select a football player to be removed from the list.");
  } else {
   var option = new Option(selectedRemoveFootballPlayerName , selectedRemoveFootballPlayerId);
   $(option).html(selectedRemoveFootballPlayerName); 
   $('#listboxFootballPlayers').append(option);
   selectedRemoveFootballPlayerId = '';
   selectedRemoveFootballPlayerName = '';
  }
 });
});
</script>
</head>
<body>
<table>
 <tr>
  <td>
   <select id="listboxFootballPlayers" size="5" multiple="multiple" style="width: 200px;">
    <option value="l1">Cristiano Ronaldo</option>
    <option value="l2">Ricardo Kaka</option>
    <option value="l3">Lionel Messi</option>
    <option value="l4">Gerd Muller</option>
    <option value="l5">Johan Crujjf</option>
    <option value="l6">Franz Beckenbauer</option>
    <option value="l7">David Beckham</option>
   </select>
  </td>

  <td>
   <table>
    <tr><td><input type="button" id="btnAddFootballPlayerToList" value="->" /> </td></tr>
    <tr><td><input type="button" id="btnRemoveFootballPlayerFromList" value="<-" /></td></tr>
   </table>
  </td>

  <td>
   <select id="selectedFootballPlayers" size="5" multiple="multiple" style="width: 200px;"></select>
  </td>
 </tr>
 </table>
 </body>
 </html>

Прежде чем я начну с вопроса, обратите внимание:

#listboxFootballPlayers - список слева
#selectedFootballPlayers - список справа

У меня есть 2 вопроса:

1.) Как удалить выбранный элемент / параметр из #listboxFootballPlayers после нажатия кнопки ->.

2.) Почему при нажатии <- после выбора элемента / параметра из #selectedFootballPlayers появляется сообщение Select a football player to be removed from the list. Мне кажется, что оно не присваивает значение переменная selectedRemoveFootballPlayerId.

Пожалуйста, спросите меня, есть ли что-то, что не понятно с моим вопросом. Пожалуйста помоги. Большое спасибо заранее.

Кстати, вот ссылка jsfiddle: http://jsfiddle.net/7vspM/

Ответы [ 3 ]

3 голосов
/ 19 ноября 2011 
$(document).ready(function() {
    $('#listboxFootballPlayers option').click(function() {
        selectedAddFootballPlayerId = $(this).attr('value');
        selectedAddFootballPlayerName = $(this).text();
    });
    $('#selectedFootballPlayers option').live('click',  // `live()` event for `option` bcoz, option in this select will  
                                                        // create after DOM ready
    function() {
        selectedRemoveFootballPlayerId = $(this).attr('value');
        selectedRemoveFootballPlayerName = $(this).text();
    });
    $('input#btnAddFootballPlayerToList').click(function() {
        if (selectedAddFootballPlayerId == '') {
            alert("Select a football player to be added from the list.");
        } else {
            var option = new Option(selectedAddFootballPlayerName, selectedAddFootballPlayerId);
            $(option).html(selectedAddFootballPlayerName);
            $('#selectedFootballPlayers').append(option);
            $('#listboxFootballPlayers option:selected').remove();  // remove selected option
            selectedAddFootballPlayerId = '';
            selectedAddFootballPlayerName = '';
        }
    });
    $('input#btnRemoveFootballPlayerFromList').click(function() {
        if (selectedRemoveFootballPlayerId == '') {
            alert("Select a football player to be removed from the list.");
        } else {
            var option = new Option(selectedRemoveFootballPlayerName, selectedRemoveFootballPlayerId);
            $(option).html(selectedRemoveFootballPlayerName);
            $('#selectedFootballPlayers option:selected').remove(); // remove selected option
            $('#listboxFootballPlayers').append(option);
            selectedRemoveFootballPlayerId = '';
            selectedRemoveFootballPlayerName = '';
        }
    });
});
1 голос
/ 19 ноября 2011

Относительно первого вопроса, несколько проще просто переместить выбранный элемент option из одного списка в другой: 

$('#listboxFootballPlayers option:selected').appendTo('#selectedFootballPlayers');

Я закомментировал строки, которые, по-видимому, не нужны в JS Fiddle demo .

Что касается вашего второго вопроса, я переписал выражение if / else: 

$('input#btnRemoveFootballPlayerFromList').click(function() {
    if (!$('#selectedFootballPlayers option:selected')){
        alert("First select a player to remove.");
    }
    else {
        $('#selectedFootballPlayers option:selected').appendTo('#listboxFootballPlayers ');
    }
});

JS Fiddleдемо .

Ссылки:

1 голос
/ 19 ноября 2011

Относительно 2):

Проблема заключается в том, что вы назначаете функцию щелчка до того, как создадите элемент для назначения. Когда вы создаете свой вариант, вы должны назначить его вместо этого, например так: 

$(option).click(function() {
 selectedRemoveFootballPlayerId = $(this).attr('value');
 selectedRemoveFootballPlayerName = $(this).text();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...