| Gidpoiiohika | 04.12.2018 19:14 |
Как удалить, скрыть значения.
У меня есть форма по которой я добавлю категории в проект, когда я нажимаю добавить категории появляется форма где я могу выбрать категорию. К проекту я могу добавить несколько категорий. Я не могу понять как мне скрыть ту категорию которою я выбрал первый раз, что бы как я добавлял категории второй раз в списку не было той категории которою я выбрал первый раз. Помогите пожалуйста :)
То есть первый раз когда я нажимаю на кнопку "Добавить категорию" я выбираю с списка категорий какую категорию я хочу добавить, например "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/ |
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>
|
рони,
Спасибо Вам большое что помогли, ну Ваш код работает не так мне нужно, может что то я не понял я просто только учусь :( сейчас если я выбираю категорию она не выбираться а просто удаляется, а мне нужно что бы я выбрал категорию и показало какую пользователь выбрал категорию, потом когда второй раз я добавляю категорию, тоже мог выбрать категорию и что бы показать пользователю какую категорию он выбрал. Ну что бы уже не было той категории который пользователь первый раз добавил. |
Gidpoiiohika,
1. зачем в селекторе показывать, то что было выбрано? покажите то что выбрано в другом месте. 2. если нужно именно так как вы хотите, ищите замену селектора гугл - кастомизация селекта 3. возможно я вас не понимаю, ждите телепата или уточните алгоритм. |
|
Gidpoiiohika,
зачем несколько селекторов, достаточно одного вместо кнопки add |
рони,
эта кнопка находиться в проекте, то есть я к проекту добавляю категории. |
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>
|
рони,
спасибо Вам большое что уделили мне время, Ваш код работает, ну мне нужно именно так как я написал :( буду пробовать дальше решить эту проблему. Данный момент мой код выглядит так:
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)
});
|
|
| Часовой пояс GMT +3, время: 05:04. |
