Question

我正在尝试创建一个脚本，根据第一个<select>选项填充第二个选择。

例如，如果我在第一个<select>上选择类别1，我需要使用子类别1.1，子类别1.2等填充第二个

。

这是我的代码：

<select id="category">
    <option value="">Select Category</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
</select>

<select id="subcategory">
    <option value=""></option>
</select>

我试图用jquery做这个。有人可以帮我这个吗？

Answer 1

$scope.gridOptions.columnDefs = [
    { name: 'id', width: '25%' },
    { field: 'name', 
      displayName: 'Name', 
      width: '25%',
      height:'auto',
      'cellTemplate':'<div><input type="text" ng-class="{error:grid.appScope.hasError(row.entity)}" ng-change="grid.appScope.objectHasChanged(row.entity)"  ng-input="row.entity.name" ng-model="row.entity.name" /><div class="errorspan" ng-show="grid.appScope.hasError(row.entity)" >Error in field</div></div>'
    },
    { name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
      cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: 
      [
        { id: 1, gender: 'Male' },
        { id: 2, gender: 'Female' }
      ] 
    },
    {
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">InActive</div>'
    }
  ];

var categories = [
    {
       value: '1',
       name: 'Category 1',
       subCategories: [{
           value: '1.1',
           name: 'Sub 1.1'
       }, {
           value: '1.2',
           name: 'Sub 1.2'
       }]
    }, {
       value: '2',
       name: 'Category 2',
       subCategories: [{
           value: '2.1',
           name: 'Sub 2.1'
       }, {
           value: '2.2',
           name: 'Sub 2.2'
       }]
    }
];

var $categorySelect =  $("#category");
var $subCategorySelect =  $("#subcategory");

// populate categories with options
categories.forEach(function(category) {
    var $option = $('<option/>').attr('value', category.value).html(category.name);
    $categorySelect.append($option);
});

$categorySelect.on('change', function() {
    // clean subcategory select from older options
    $subCategorySelect.empty();
  
    // find selected category
    var selectedCategoryValue = $categorySelect.val();
    var category = categories.find(function(category) {
        return category.value == selectedCategoryValue;
    });
  
    // if category found - populate subcategory select
    if (category) {
        category.subCategories.forEach(function(subcategory) {
            
            // you can extract this line into separate function
            var $option = $('<option/>').attr('value', subcategory.value).html(subcategory.name);
            
            $subCategorySelect.append($option);
        });
    }
    
})

Answer 2

检查这个简单的例子

$('#category').change(function(){
  var options = '<option value="'+$('#category').val()+'">'+$('#category').val()+'</option>';
  $('#subcategory').append(options);
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select id="category">
    <option value="">Select Category</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
</select>
<select id="subcategory">
    <option value=""></option>
</select>
</body>
</html>

如何根据第一个</select>选项填充第二个<select>

2 个答案: