Блог

Главная - Вопросы по программированию - Как установить параметры выбора в jQuery с помощью функций empty и append

Как установить параметры выбора в jQuery с помощью функций empty и append

#jquery

#jquery

Вопрос:

В версии jQuery 3.3 я устанавливаю параметры выбора с помощью следующих двух команд

 $("#selection_input").empty();
$("#selection_input").append(data.options);

Можно ли заменить его на 1 команду?

Спасибо!

Комментарии:

1. Зачем вам это нужно? Что не так с использованием этих двух функций? Это легко читается и, вероятно, быстрее, чем использование одной функции.

Ответ №1:

Ответ — да. В приведенной ниже демонстрации при вводе мыши вызывается функция, которая использует empty и append вместе для восстановления параметров ранее сохраненных параметров выбора.

 function removeOptions($select) {
  var $optionsToRemove = $select.find('option:not(:selected)'); 
  $optionsToRemove.remove(); //remove
}

function setSelectCurrentState($select) {
  $select.data("currentOptions", $select.find('option'));
}

function restoreOptions($select) {
  var oldOptions = $select.data("currentOptions"); 
  if (oldOptions) {
    //This line of code uses empty and then append to restore the options
    $select.empty().append(oldOptions);
  }
}

$(document).ready(function() {
  var $hoverSelect = $('#hoverSelect');
  $hoverSelect.mouseleave(function() {
    setSelectCurrentState($hoverSelect); // save the current state
    removeOptions($hoverSelect); 
  });
  $hoverSelect.mouseenter(function() {
    restoreOptions($hoverSelect);
  });
});  
 body {
  background-color: #99b;
}
form {
  width: 150px;
  margin: 0 auto;
}
h1,
h2 {
  text-align: center;
}
#hoverSelect {
  width: 150px;
  height: 65px;
  font-size: 1.2em;
}
#hoverSelect:hover {
  height: 150px;
}
#wrapper {
  width: 100%;  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<h2>Hover to expand, click or shift click options to select, mouse out to minimize</h2>
<br />
<div id="wrapper">
  <form>
    <select id="hoverSelect" name="hoverSelect" multiple="multiple">
      <option value="1">One</option>
      <option value="2" class="two">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
      <option value="6">Six</option>
    </select>
  </form>
</div>
<br />
<h2>Remembers the checked state of the options</h2>

Ответ №2:

Вы можете использовать .html() для замены содержимого. Сначала он очистит его.

 $("#selection_input").html(data.options);