Question

如何从选择的下拉列表中拆分单词并将其发送到另一个下拉列表

示例

<select class="form-control" name="Studentabsent[courseid]" id="Studentabsent_courseid">
  <option value="">SelectCourse</option>
  <option value="20182019">20182019</option>
  <option value="20202021">20202021</option>
</select>

并将其发送到另一个选择下拉列表

<select class="form-control" name="year" id="year">
  <option value="">SelectCourse</option>
  <option value="2018">2018</option>
  <option value="2019">2019</option>
  <option value="2020">2020</option>
  <option value="2021">2021</option>
</select>

感谢帮助。谢谢

Answer 1

您可以使用map()从现有的 select 元素生成年份列表。然后使用each()通过以下方式动态创建选项：

var list = $('#Studentabsent_courseid option').not(':first').map(function(i, o){
  return o.value.match(/.{1,4}/g);
}).get();

$.each(list, function (i, item) {
  $('#year').append($('<option>', { 
      value: item,
      text : item 
  }));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="Studentabsent[courseid]" id="Studentabsent_courseid">
  <option value="">SelectCourse</option>
  <option value="20182019">20182019</option>
  <option value="20202021">20202021</option>
</select>

<select class="form-control" name="year" id="year">
  <option value="">SelectCourse</option>
</select>

Answer 2

在RegEx的帮助下，首先在下拉菜单中使用循环，将第一个下拉菜单值分割并为下一个下拉菜单生成标记，然后附加该标记。

var html = '';
html += '<option value="">SelectCourse</option>';
$('#Studentabsent_courseid option').not(':first').each(function(index, element) {
  var str = ($(this).val());
  var spl = str.match(/.{4}/g);
  html += "<option>" + spl[0] + "</option>"
  html += "<option>" + spl[1] + "</option>"

});
$('#new').html(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="form-control" name="Studentabsent[courseid]" id="Studentabsent_courseid">
  <option value="">SelectCourse</option>
  <option value="20182019">20182019</option>
  <option value="20202021">20202021</option>
</select>

<select id='new'>

</select>

Answer 3

您可以使用jQuery来做到这一点。

$( document ).ready(function() {
  var list = [];
    $("#Studentabsent_courseid option").each(function()
    {
        list.push($(this).val());
    });
    $("#Studentabsent_courseid").empty();
    $("#Studentabsent_courseid").append('<option value="">SelectCourse</option>');

    for(let index of list)
      if(index.length > 4){
        $("#Studentabsent_courseid").append('<option value="'+ index.substring(0, 4) +'">'+ index.substring(0, 4) +'</option><option value="'+ index.substring(4, index.lenght) +'">'+ index.substring(4, index.lenght) +'</option>');

          
      }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="Studentabsent[courseid]" id="Studentabsent_courseid">
<option value="">SelectCourse</option>
<option value="20182019">20182019</option>
<option value="20202021">20202021</option>
</select>

Answer 4

使用纯JavaScript可以完成相同工作的简单代码

function createNewDropDown(ele)
 {    
    var selectedValue = ele.options[ele.selectedIndex].value;
    var midSep = selectedValue.length/2
    var firstValue = selectedValue.slice(0, 4);
    var secondValue = selectedValue.slice(4, 8);

    var sel = document.getElementById("year");

    var opt = document.createElement("option");
    opt.value = firstValue;
    opt.text = firstValue;

    sel.add(opt, null);

    var opt = document.createElement("option");
    opt.value = secondValue;
    opt.text = secondValue;
    sel.add(opt, null);
 }

<html>
    <head>

    </head>

    <body>
            <select class="form-control" name="Studentabsent[courseid]" id="Studentabsent_courseid" onchange="createNewDropDown(this);">
                <option value="">SelectCourse</option>
                <option value="20182019">20182019</option>
                <option value="20202021">20202021</option>
            </select>
            <select id='year' name='year'>
                <option>Select Year</option>
            </select>
    </body>

</html>

如何从下拉选择中拆分单词并将其插入另一个下拉选择中

4 个答案: