0
ボタンをクリックするたびに選択フィールドを追加する必要があるプロジェクトで問題が発生しています。ボタンをクリックして選択ボックスを追加する前の選択ボックスでオプションが選択されていない
以下は、私が試した最新のコードですが、以前に追加されたselectboxから既に選択されている値を削除できません。ここで また、私は削除するか、選択ボックスの任意の値をchnageならば、前に選ばれたその選択ボックスの値が他のselectboxesで再利用可能であるべきことをしたい。..
はコードです：
以下はvar app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$(document).ready(function() {
var listy = [
{display: 'A', value: 'A'},
{display: 'B', value: 'B'}];
var paczki = [
{display: 'C', value: 'C'},
{display: 'D', value: 'D'}];
var max_fields = 7;
var wrapper = $('.input_fields_wrap');
var add_button = $('.add_field_button');
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append("<div><label for='service'>Usługa</label>" +
"<select name='service' class='service' <!-- here -->" +
"<option value='Wybierz' selected>Wybierz</option>" +
"<option value='Listy'>Listy</option>" +
"<option value='Paczki'>Paczki</option>" +
"</select><a href='#' class='remove_field'>Remove</a>" +
"<select name='type' class='type'></select>" +
"</div>");
}
})
// .trigger('click')
$(wrapper).on('click', ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$(wrapper).on('change', '.service', function(e) {
e.preventDefault();
var parent = $(this).val();
switch (parent) {
case 'Listy':
list(listy, $(this).next().next());
break;
case 'Paczki':
list(paczki, $(this).next().next());
break;
// TODO: add case for Wybierz
}
});
function list(array_list, element) {
$(element).html("");
$(array_list).each(function(i) {
$(element).append("<option value=" + array_list[i].value + ">" + array_list[i].display + "</option>");
});
}
});
});<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class='input_fields_wrap'>
<button class='add_field_button'>Add more fields</button>
</div>
</body>
</html>
あなたの要件のスクリーンショットをアップロードすることができます。 – Alok