Как удалить, скрыть значения.

[Gidpoiiohika]

рони,
Спасибо Вам большое!

[Gidpoiiohika]

рони,
А можно ещё пожалуйста один вопрос. Я уже почти к цели дошёл, сейчас вроде всё хорошо работает ну не так как нужно, сейчас попытаюсь объяснить!
Когда я нажимаю первый раз на кнопку добавить и не выбираю категорию и нажимаю второй раз добавить категорию и потом уже добавляю категорию то всё работает как нужно, то есть в первом селекте я выбираю категорию "Java" и втором селекте "Java" уже нету. Но когда я нажимаю на кнопку добавить категорию, выбираю категорию и ещё раз нажимаю на кнопку добавить категорию код уже не работает

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)
    });
script 
  | var sel = $('select');
    sel.change(function(){
      var cVal = $(this).val();
      if(cVal !== ''){
        $('[value="' + cVal + '"]', sel).not(this).hide();
      } else {
        $('option',sel).show();
      }
    });

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

потом я выбираю в категорию

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

[рони]

Gidpoiiohika,
я не знаю формат в котором вы пишите код, не понимаю ваших обьяснений, возможно вам поможет делегирование.
уберите все change с селектов, и добавьте их родителю.
$('.js-category-select').on('change', function(e) заменить на
$('селектор_родителя').on('change' , '.js-category-select',function(e)

sel.change
на
$('селектор_родителя').on('change' , 'select',function(e)

[рони]

$('[value="' + cVal + '"]', sel).not(this).hide();

на всякий случай в ie это не работает, скрыть option по хорошему можно только удалением!

[Gidpoiiohika]

рони,
Спасибо Вам большое, я Вам отправил видео, сейчас буду пробовать.

[Gidpoiiohika]

рони,
Здравствуйте, можете подсказать как можно переписать код что бы он работал когда я нажимаю на кнопку 'add categories'
вот сам код

script 
  | var sel = $('.js-category-select'),
    opt = $('option:not(:first-child)', sel);
    function review(){
      var chosen = sel.map(function(i, el){
        return $(':selected',el);
      });
      var category = 0;
      opt.show().prop('disabled', false);
      chosen.each(function(i, el){
        category = $(el).val();
        opt.not(el).filter(function(){
          return $(this).val() == category;
        }).hide().prop('disabled', true);
      });
    }
    sel.on('change', review)

вот кнопка

<fieldset id="categories_projects"><a class="btn btn-primary dropdown-toggle add_fields" data-association="categories_project" data-associations="categories_projects" data-association-insertion-template="<div class=&quot;nested-fields&quot;><div class=&quot;field&quot;><div class=&quot;form-group&quot;><label class=&quot;control-label&quot; for=&quot;project_categories_projects_attributes_new_categories_projects_category_id&quot;>Category</label><select class=&quot;form-control js-category-select&quot; name=&quot;project[categories_projects_attributes][new_categories_projects][category_id]&quot; id=&quot;project_categories_projects_attributes_new_categories_projects_category_id&quot;><option value=&quot;&quot;>Select Category</option>
<option data-default_external_rate=&quot;0&quot; value=&quot;5&quot;>Management</option>
<option data-default_external_rate=&quot;0&quot; value=&quot;7&quot;>DevOps</option>
<option data-default_external_rate=&quot;0&quot; value=&quot;8&quot;>Design</option>
<option data-default_external_rate=&quot;111&quot; value=&quot;6&quot;>RoR Developer</option></select></div><div class=&quot;form-group&quot;><label class=&quot;control-label&quot; for=&quot;project_categories_projects_attributes_new_categories_projects_external_rate&quot;>Default External Rate</label><input class=&quot;form-control js-external_rate&quot; type=&quot;text&quot; name=&quot;project[categories_projects_attributes][new_categories_projects][external_rate]&quot; id=&quot;project_categories_projects_attributes_new_categories_projects_external_rate&quot; /></div><input type=&quot;hidden&quot; name=&quot;project[categories_projects_attributes][new_categories_projects][_destroy]&quot; id=&quot;project_categories_projects_attributes_new_categories_projects__destroy&quot; value=&quot;false&quot; /><a class=&quot;btn btn-primary remove_fields dynamic&quot; href=&quot;#&quot;>Remove Categories</a></div></div><script>$('.js-category-select').on('change', function(e) {
  var optionSelected = $(&quot;option:selected&quot;, this).data('default_external_rate');
  $(this).closest('.field').find('.js-external_rate').val(optionSelected)
});</script><script>var sel = $('.js-category-select'),
opt = $('option:not(:first-child)', sel);
function review(){
  var chosen = sel.map(function(i, el){
    return $(':selected',el);
  });
  var category = 0;
  opt.show().prop('disabled', false);
  chosen.each(function(i, el){
    category = $(el).val();
    opt.not(el).filter(function(){
      return $(this).val() == category;
    }).hide().prop('disabled', true);
  });
}
sel.on('change', review)</script>" href="#">add categories</a></fieldset>

[рони]

Gidpoiiohika,
не могу ... и не понимаю зачем нужны эти селекторы, чем код из поста №8 не устраивает
https://javascript.ru/forum/499768-post8.html

[рони]

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;
      padding: 10px;
  }
  .patern{
      display: none;
  }

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

  <script>
$(function() {
    $(".add").click(function() {
        var html = "<input><span class='remove'>";
        var li = $("<li>").appendTo("ul");
        var sel = $(".patern").clone(true).removeClass("patern").appendTo(li);
        $(html).appendTo(li);
        li.on("click", ".remove", function() {
            var data = sel.data("opt");
            $(".form-control").not(sel).append($(data).clone());
            li.remove()
        })
    });
    $("ul").on("change", ".form-control", function() {
        var i = this.selectedIndex;
        var value = this.value;
        var data = $(this).data("opt");
        if (i) {
            $(".form-control").not(this).find("option[value='" +
                value + "']").remove();
            $(this).data("opt", this.options[i])
        } else $(this).removeData("opt");
        if (data) $(".form-control").not(this).append($(data).clone())
    })
});
  </script>
</head>

<body>
<ul>

</ul>



<select class="patern form-control js-category-select" >
  <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>
<input name="" type="button" value="Add Category" class="add">



</body>
</html>