Question

我有一个选择下拉列表和一个多选下拉列表。我希望多选一个取决于选择的一个。我该怎么办？

<div class="row">
<div class="col" ><label>Which class: </label><select name="type_of_subject_c" id="type_of_subject_c" tabindex="1">
<option value="" selected="selected">--не выбрано--</option>
<option value="5">5th </option>
<option value="6">6th</option>
<option value="7">7th</option>
<option value="8">8th</option>
</select>
</div>

我希望，例如，如果一个人选择了第五名 - 在多选字段中显示“数学”，“英语”，“文学”等选项如果一个人选择了第六名 - 表演“数学”，“科学”，“音乐” 等

<div class="row">
<div class="col"><label>Coruses: </label><select   name="course_subj_c[]" id="course_subj_c" multiple="multiple" tabindex="1" >
<option value="math">Math</option>
<option value="eng>English</option>
<option value="lit">Literature</option>

Answer 1

首先，即使问题无效，您也应始终在问题中添加代码。 Stackoverflow是一个学习的地方，如果你不分享你的工作，我们如何帮助你。

数组data包含您的所有数据。我们动态地向options添加select。

函数init()是它的起始位置。要更改数据，我们需要向第二个选择添加一个事件监听器，如此

select1.addEventListener('change', function(e) ...

这是一个有效的例子。请阅读我的评论以便更好地理解。如果您有任何疑问，请不要犹豫。

＆＃13;

var data = [
  { subject : 'one', 
    selected: true,
    courses: ['Math_one', 'English_one', 'Literature_one'] 
  },
  { subject : 'two',
    courses: ['Math_two', 'English_two', 'Literature_two'] 
  }, 
  { subject : 'three',
    courses: ['Math_three', 'English_three', 'Literature_three'] 
  },
  { subject : 'four',
    courses: ['Math_four', 'English_four', 'Literature_four'] 
  },
  { subject : 'five',
    courses: ['Math_five', 'English_five', 'Literature_five'] 
  },
  { subject : 'six',
    courses: ['Math_six', 'English_five', 'Literature_six'] 
  }
];

var select1 = document.getElementById('type_of_subject_c');
var select2 = document.getElementById('course_subj_c');
var resultText = document.getElementById('currentlySelected');

// Your result, do whatever you want
var selectedOptions = [];

function init(data) {

  var subjects = [];
  
  for (var i = 0; i < data.length; i++) {
    var element = data[i];
    
    // Add subjects to subjects array
    subjects.push(element.subject);
    
    
    // We skip if current element is not selected
    if (!element.selected) {
      continue;
    }
    
    // If element is selected we change content of `select2`
    if (element.selected) {
      fillSelectOptions(select2, element.courses);
    }
  }
  
  // Append all subjects as select options to `select1`
  fillSelectOptions(select1, subjects);
  
}

// Lets add event listener `onChange` to `select`
select1.addEventListener('change', function(e) {
  // Based on selected/current value we will change data options of `select2`
  var selectedValue = e.target.value;
  
  // Clear result text each time we change `select1`
  resultText.innerHTML = '';
  selectedOptions = [];
  
  // Before we append new data lets clear old one
  clearSelect2Options();
  
  // Lets find related data to selected/current value
  for (var i = 0; i < data.length; i++) {
    var element = data[i];
    
    if (element.subject === selectedValue) {
      fillSelectOptions(select2, element.courses);
      
      break;
    }
  }

});

select2.addEventListener('change', function(e) {
  var options = document.querySelectorAll('#course_subj_c option');
  
  resultText.innerHTML = '';
  selectedOptions = [];
  
  for (var i = 0; i < options.length; i++) {
    var option = options[i];
    if (option.selected) {
      selectedOptions.push(option.value);
    }
  } 
  
  
  // Our Result is :
  //console.log(selectedOptions);
  // Append result to `resultText` convert array to string via `join()`
  resultText.innerHTML = selectedOptions.join();

});



function fillSelectOptions(selector, dataOptions) {

  for(var i = 0; i < dataOptions.length; i++) {
      var opt = document.createElement('option');
      opt.innerHTML = dataOptions[i];
      opt.value = dataOptions[i];
      selector.appendChild(opt);
  }
  
}

function clearSelect2Options() {
    var i;
    for(i = select2.options.length - 1 ; i >= 0 ; i--) {
        select2.remove(i);
    }
}

init(data);

＆＃13;

favorite
	


<select id="type_of_subject_c" name="type_of_subject_c">
</select>

<select name="course_subj_c[]" id="course_subj_c" multiple="multiple" tabindex="1">
</select>

<div>Currently selected <span id="currentlySelected"></span></div>

＆＃13;

Answer 2

仅使用HTML无法实现此目的。您需要使用JavaScript以使用元素填充其他下拉列表，具体取决于在第一个下拉列表中选择的值。在第一个下拉列表中添加onchange个事件。在此函数内，清除第二个下拉列表中的所有选项元素。然后根据第一个下拉列表的选定值填充第二个下拉列表。这里是使用jQuery的代码示例。

    <select name="first-dropdown" id="first-dropdown" onchange="processValue();">
        <option value="" selected="selected">Default Option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <select name="second-dropdown" multiple="multiple" id="second-dropdown">
        <option value="" selected="selected">Select option in the first dropdown</option>
    </select>

<script type="text/javascript">
    function processValue() {
        var firstChoice = $('#first-dropdown').val();
        // ensure you didn't select the default option
        if (firstChoice !== "") {
            $('#second-dropdown').empty();
            switch (firstChoice) {
                case "1":
                    $('#second-dropdown').append('<option value="first1">First 1</option>');
                    $('#second-dropdown').append('<option value="first2">First 2</option>');
                    break;
                case "2":
                   $('#second-dropdown').append('<option value="second1">Second 1</option>');
                   $('#second-dropdown').append('<option value="second2">Second 2</option>');
                   break;
                // ... other cases
                default:
                   break;
            }
            // init jquery checkbox plugin again
            $('#second-dropdown').multipleSelect();
        }
    }
</script>

这里是jsfiddle的链接： https://jsfiddle.net/37swkpso/

根据选择填写多选下拉列表

2 个答案: