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

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

示例

<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>

感谢帮助。谢谢

您可以使用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>

在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>

您可以使用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>

使用纯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>

相关内容

最新更新

热门标签：