Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2018, 17:42
Интересующийся
Отправить личное сообщение для Gidpoiiohika Посмотреть профиль Найти все сообщения от Gidpoiiohika
 
Регистрация: 04.12.2018
Сообщений: 22

Как удалить, скрыть значения.
У меня есть форма по которой я добавлю категории в проект, когда я нажимаю добавить категории появляется форма где я могу выбрать категорию. К проекту я могу добавить несколько категорий. Я не могу понять как мне скрыть ту категорию которою я выбрал первый раз, что бы как я добавлял категории второй раз в списку не было той категории которою я выбрал первый раз. Помогите пожалуйста
То есть первый раз когда я нажимаю на кнопку "Добавить категорию" я выбираю с списка категорий какую категорию я хочу добавить, например "Management"
второй раз когда я нажимаю "добавить категорию" что бы в этом списку не было "Management"
<select class="form-control js-category-select" name="project[categories_projects_attributes][1543933181636][category_id]" id="project_categories_projects_attributes_1543933181636_category_id">
  <option value="">Select Category</option>
  <option data-default_external_rate="0" value="5">Management</option>
  <option data-default_external_rate="0" value="7">DevOps</option>
  <option data-default_external_rate="0" value="8">Design</option>
</select>


<select class="form-control js-category-select" name="project[categories_projects_attributes][1543933186714][category_id]" id="project_categories_projects_attributes_1543933186714_category_id">
  <option value="">Select Category</option>
  <option data-default_external_rate="0" value="5">Management</option>
  <option data-default_external_rate="0" value="7">DevOps</option>
  <option data-default_external_rate="0" value="8">Design</option>
</select>

https://jsfiddle.net/Lhjau0fk/1/
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2018, 18:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Gidpoiiohika,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".form-control").change(function() {
    var i = this.selectedIndex;
    this.options.remove(i);
})
});
  </script>
</head>

<body>
<select class="form-control js-category-select" name="project[categories_projects_attributes][1543933181636][category_id]" id="project_categories_projects_attributes_1543933181636_category_id">
  <option value="">Select Category</option>
  <option data-default_external_rate="0" value="5">Management</option>
  <option data-default_external_rate="0" value="7">DevOps</option>
  <option data-default_external_rate="0" value="8">Design</option>
</select>


<select class="form-control js-category-select" name="project[categories_projects_attributes][1543933186714][category_id]" id="project_categories_projects_attributes_1543933186714_category_id">
  <option value="">Select Category</option>
  <option data-default_external_rate="0" value="5">Management</option>
  <option data-default_external_rate="0" value="7">DevOps</option>
  <option data-default_external_rate="0" value="8">Design</option>
</select>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2018, 18:50
Интересующийся
Отправить личное сообщение для Gidpoiiohika Посмотреть профиль Найти все сообщения от Gidpoiiohika
 
Регистрация: 04.12.2018
Сообщений: 22

рони,
Спасибо Вам большое что помогли, ну Ваш код работает не так мне нужно, может что то я не понял я просто только учусь сейчас если я выбираю категорию она не выбираться а просто удаляется, а мне нужно что бы я выбрал категорию и показало какую пользователь выбрал категорию, потом когда второй раз я добавляю категорию, тоже мог выбрать категорию и что бы показать пользователю какую категорию он выбрал. Ну что бы уже не было той категории который пользователь первый раз добавил.
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2018, 19:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Gidpoiiohika,
1. зачем в селекторе показывать, то что было выбрано?
покажите то что выбрано в другом месте.
2. если нужно именно так как вы хотите, ищите замену селектора
гугл - кастомизация селекта
3. возможно я вас не понимаю, ждите телепата или уточните алгоритм.
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2018, 19:14
Интересующийся
Отправить личное сообщение для Gidpoiiohika Посмотреть профиль Найти все сообщения от Gidpoiiohika
 
Регистрация: 04.12.2018
Сообщений: 22

рони,
итальянские спальни
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2018, 19:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Gidpoiiohika,
зачем несколько селекторов, достаточно одного вместо кнопки add
Ответить с цитированием
  #7 (permalink)  
Старый 04.12.2018, 19:29
Интересующийся
Отправить личное сообщение для Gidpoiiohika Посмотреть профиль Найти все сообщения от Gidpoiiohika
 
Регистрация: 04.12.2018
Сообщений: 22

рони,
эта кнопка находиться в проекте, то есть я к проекту добавляю категории.
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2018, 19:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

select Add Category
Gidpoiiohika,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .remove:after{
     content: "Remove Category";
     background-color: #0000FF;
      padding: 5px;
      margin: 5px;
      border-radius: 4px;
  }
  li{
      margin: 15px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $(".form-control").change(function() {
    var i = this.selectedIndex;
    var opts = this.options;  
    if (i) {
      var opt = opts[i];
      opts.remove(i);
      var html = opt.text + "<span class='remove'>";
      var li = $("<li>", {html:html}).appendTo("ul");
      li.on("click", ".remove", function() {
        li.remove();
        opts.add(opt);
        opts.selectedIndex = 0;
      });
    }
  });
});
  </script>
</head>

<body>
<ul>

</ul>



<select class="form-control" >
  <option value="" >Add Category</option>
  <option data-default_external_rate="0" value="5">Management</option>
  <option data-default_external_rate="0" value="7">DevOps</option>
  <option data-default_external_rate="0" value="8">Design</option>
</select>




</body>
</html>

Последний раз редактировалось рони, 04.12.2018 в 19:52.
Ответить с цитированием
  #9 (permalink)  
Старый 04.12.2018, 20:18
Интересующийся
Отправить личное сообщение для Gidpoiiohika Посмотреть профиль Найти все сообщения от Gidpoiiohika
 
Регистрация: 04.12.2018
Сообщений: 22

рони,
спасибо Вам большое что уделили мне время, Ваш код работает, ну мне нужно именно так как я написал буду пробовать дальше решить эту проблему. Данный момент мой код выглядит так:
div class='nested-fields'
  div class='field'
    = f.select :category_id, options_for_select(Category.all.map{|e| [e.name, e.id, { 'data-default_external_rate' => e.default_external_rate }]}, f.object.category_id),
    { prompt: "Select Category" },
    { class: "js-category-select" }
    = f.text_field :external_rate, { class: "js-external_rate",  label: 'Default External Rate' }
    = link_to_remove_association 'Remove Categories', f, class: 'btn btn-primary'
script 
  | $('.js-category-select').on('change', function(e) {
      var optionSelected = $("option:selected", this).data('default_external_rate');
      $(this).closest('.field').find('.js-external_rate').val(optionSelected)
    });
Ответить с цитированием
  #10 (permalink)  
Старый 04.12.2018, 20:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Gidpoiiohika,
https://javascript.ru/forum/misc/64882-kak-sdelat-filtraciyu-odinakovykh-ehlementov-v-spiske-select-option.html#post428435
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
подскажите как удалить div alex2012 jQuery 5 13.10.2016 17:43
Как удалить элемент таблицы seoneo Элементы интерфейса 2 29.08.2012 18:54
Как получить значения вышестоящих элементов дерева TreeStore ? Allan Stark ExtJS 1 31.07.2012 16:48
КАК удалить []-символы из строки?! Brook Events/DOM/Window 4 25.04.2012 16:38
как найти и удалить массив из массива? FRIE Общие вопросы Javascript 8 14.03.2011 15:48