Question

我有两个选择。哪些是IT和管理。他们两个都有一个相同的选择。我怎样才能将它们组合在一起？

我该怎么做？我实际上是Jquery的新手

正如您所看到的，IT和管理层具有与Analyst相同的选项。我应该如何编写代码以确保Analyst被声明一次，但可以在IT和Mangement中使用

代码：

$(document).ready(function() {
  $("#select1").change(function() {
    if ($(this).data('options') == undefined) {
      $(this).data('options', $('#select2 option').clone());
    }

    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
  });

  $("#select1").change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select1" id="select1">
  <option value="3"></option>
  <option value="1">IT</option>
  <option value="2">Management</option>
</select>
<select name="select2" id="select2">
  <option value="3"></option>
  <option value="1">Programmer</option>
  <option value="1">Technician</option>
  <option value="1">Analyst</option>
  <option value="2">HR</option>
  <option value="2">Secretary</option>
  <option value="2">Analyst</option>
</select>

Answer 1

据我了解，您希望在第二个下拉列表中填充不同的选项，具体取决于第一个中的选择。并且，您想要使用＆＃34;相同＆＃34;第一个和第二个框中的选项（Analyst）。这是你可以做到的一种方式：

<强> HTML

<select name="select1" id="select1">
    <option value="it">IT</option>
    <option value="management">Management</option>
</select>
<select name="select2" id="select2">
    <!-- options will be loaded dynamically -->
</select>

<强>的JavaScript

// hashtable of all roles
// (keys could be strings or ints, depending on your style and data)
var roles = {};
roles['code'] = 'Programmer';
roles['tech'] = 'Technician';
roles['analyst'] = 'Analyst';
roles['hr'] = 'HR';
roles['secretary'] = 'Secretary';
roles['boss'] = 'Boss';

// store the keys we want for each option group
var groups = {};
groups['it'] = ['code', 'tech', 'analyst'];
groups['management'] = ['hr', 'secretary', 'analyst'];

function changeOptionGroup(groupKey) {
    // clear out the current options
    $("#select2").empty();

    // load the correct ones
    groups[groupKey].forEach(function (value, index) {
        $("#select2").append($("<option />")
            .val(value)
            .text(roles[value]));
    });
}

$(document).ready(function () {
    // when the first box changes, update the second
    $('#select1').change(function () {
        changeOptionGroup($(this).val());
    });

    // fire on page load
    $('#select1').change();
});

<强>解释

首先，我们使用我们想要在第二个框中使用的所有可能选项填充roles。每个都存储有一个键和一个值。
然后，我们可以创建一个groups对象并存储我们想要在每个组中看到的键的数组。该群组也有一个密钥 - 请注意我在此处（it和management）的密钥与select1下拉列表中的选项值相同。这将在一分钟内发挥作用。
changeOptionGroup()函数采用groupKey参数，清除第二个框，然后使用循环将正确的选项添加到第二个框，具体取决于我们选择的组。 groups[groupKey]访问groups对象并检索我们想要的角色键数组。 .text(roles[value])在roles对象中查找特定角色（循环提供value）。
最后，我们可以在.ready()中填写所有内容。这非常简单：只有绑定到.change()的事件才能调用changeOptionGroup，并且当前选中的选项value已传入。我们还需要在页面加载时触发事件（否则，在用户第一次更改选择之前，它将无法工作。

JSFiddle：http://jsfiddle.net/do9kq54r/2/

在Jquery中将选项组合在一起

1 个答案: