更改第二个选择值并保留值

你好我想加载数据选项的第二选择从MySQL时，我点击第一个选择器的值。并保持所选最后一个字段的JSON数据并保持附加功能。更改第二个选择值并保留值

我知道如何从mysql中导入数据，但是我希望每次更改第一个选择器时都会得到值，而不更改所有第二个选择器，只有相关的选择器。

它是如何工作的。我选择一个类别（代码中未显示）最重要的：选择1接收所有选定类别的类别。的选择2接收选择1子类别

当1：第一类被改变，第二个选择是加载，但不要忘了，我需要增添无限的领域不使用这个瞬息万变第二选择

IM的所有类别代码： https://plnkr.co/edit/kKjhpy0fdnOprFA8PAYx?p=preview

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" href="style.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="appCtrl"> 
 
<h3>Add Input fields dynamically</h3> 
 

 

 

 
<button ng-click="addSelectItem()">Add select Field</button> 
 

 
<div ng-repeat="item in selects"> 
 
    <select ng-model="item.type"><option ng-repeat='option1 in type' value='{{option1.nomcarac}}' >{{option1.nomcarac}}</option></select> 
 
    <select ng-model="item.brandname" ><option ng-repeat='option1 in valuelist' value='{{option1.nomcarac}}' >{{option1.nomcarac}}</option></select> 
 
    <button ng-click="getValue(item)">get input value</button> 
 
</div> 
 
     
 

 

 
<pre>{{inputs | json}}</pre> 
 
<pre>{{selects | json}}</pre> 
 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('appCtrl', function($scope) { 
 
\t $scope.inputs = []; 
 
\t $scope.selects = []; 
 
\t $scope.type = [{nomcarac: "phone"},{nomcarac: "shoes"}] 
 
\t $scope.phonelist = [{nomcarac: "apple"},{nomcarac: "motorola 10g"}] 
 
\t $scope.valuelist = [{nomcarac: "test"},{nomcarac: "test2"}] 
 
\t $scope.shoeslist = [{nomcarac: "jean michel"},{nomcarac: "motorola 10g"}] 
 
\t 
 
\t 
 
    var count = 1; 
 
    var fieldname; 
 
    $scope.addItem = function(){ 
 
    \t fieldname = "Field " + count; 
 
    \t $scope.inputs.push({name: fieldname}); 
 
     count++; 
 
    } 
 
    
 
    $scope.addSelectItem = function(){ 
 
     fieldname = "Field " + count; 
 
    \t $scope.selects.push({name: fieldname}); 
 
     count++; 
 
    } 
 
    $scope.getValue = function(item){ 
 
    \t alert(item.value); 
 
    } 
 
    
 
}); 
 
</script> 
 

 
</body> 
 
</html>

来源

2017-08-01 jean

https://plnkr.co/edit/Ab34HtswE8Ckszw7jdWO?p=preview 你需要什么？ – Dreamweaver

@Dreamweaver不，我只需要为第二个选择器加载一个新的选项列表当你点击第一个选择时，第二个选择从第一个选项选择值获得来自mysql的响应。但我不想改变所有的第二选择器。只有有关选择 – jean

@jean，请看看我的答案，看看它是否对你有帮助。 –

如果我理解正确的，你想popul每次都会选择第二个select的选项，您可以更改组中第一个选择的值。如果是这样，你可以使用ngChange做到这一点并存储数值列表中的相应item对象中：

var app = angular.module('myApp', []); 
 
app.controller('appCtrl', function($scope) { 
 

 
    $scope.inputs = []; 
 
    $scope.selects = []; 
 

 
    $scope.type = [{nomcarac: "phone"}, {nomcarac: "shoes"}]; 
 

 
    $scope.phonelist = [{nomcarac: "apple"}, {nomcarac: "motorola 10g"}]; 
 
    $scope.shoeslist = [{nomcarac: "jean michel"}, {nomcarac: "gucci"}]; 
 
\t 
 
    var count = 1; 
 
    var fieldname; 
 
    $scope.addItem = function(){ 
 
    fieldname = "Field " + count; 
 
    $scope.inputs.push({name: fieldname}); 
 
    count++; 
 
    }; 
 

 
    $scope.addSelectItem = function(){ 
 
    fieldname = "Field " + count; 
 
    $scope.selects.push({name: fieldname}); 
 
    count++; 
 
    }; 
 

 
    $scope.getValue = function(item){ 
 
    console.log(item); 
 
    }; 
 

 
    $scope.getValuesList = function(item) { 
 
    //get actual data from db 
 
    switch (item.type){ 
 
     case 'phone': 
 
     item.valuelist = angular.copy($scope.phonelist); 
 
     break; 
 
     case 'shoes': 
 
     item.valuelist = angular.copy($scope.shoeslist); 
 
     break; 
 
     default: 
 
     item.valuelist = []; 
 
     break; 
 
    } 
 
    }; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="appCtrl"> 
 
    <h3>Add Input fields dynamically</h3> 
 

 
    <button ng-click="addSelectItem()">Add select Field</button> 
 

 
    <div ng-repeat="item in selects"> 
 
    
 
     <select ng-model="item.type" ng-change='getValuesList(item)'> 
 
     <option ng-repeat='option in type' value='{{::option.nomcarac}}' >{{::option.nomcarac}}</option> 
 
     </select> 
 
     
 
     <select ng-model="item.brandname"> 
 
     <option ng-repeat='option in item.valuelist' value='{{::option.nomcarac}}' >{{::option.nomcarac}}</option> 
 
     </select> 
 
     
 
     <button ng-click="getValue(item)">get input value</button> 
 
    </div> 
 

 
    <pre>{{inputs | json}}</pre> 
 
    <pre>{{selects | json}}</pre> 
 
</div>

来源

2017-08-01 18:31:09

我的第一个选择选项是由一个MySQL JSON响应生成的。第一个选择也是动态的 – jean

我认为你并不远处您选择一个类别。，子类别接收数据您选择一个子类别。选择1个接收数据您选择多个caracteristics。从选定的select 1中选择2个接收数据，但不要忘记数据是动态的，并且我需要每个新的第二个选择的新值但我想要一个按钮来添加无限特征 – jean

@jean然后将ngChange处理程序添加到然后根据需要选择和修改'type'对象。我的回答是给你关于如何动态填充选项的想法，我不知道你的项目的所有细节。 –

更改第二个选择值并保留值

回答

相关问题