第一个下拉菜单选择第二个和第三个下拉菜单

First Dropdown selecting second and third dropdown

本文关键字：下拉菜单 三个 选择 第二个 第一个      更新时间：2023-09-26

html-

  <label >Parameter Name: </label>
    <select id="name"  name="name" required>
    </select> </br> </br>
    <label >Address: </label>
    <select class= "address" type=text id="address" name="address" style="width:14em;" required>
    </select> </br> </br>
    <label  >Data Size:    </label>  </br>
    <select   type=text id=sizeSelect name="size"style="width: 14em;" required>
    </select> </br> </br>

js-

function processFile(e) {
  var file = e.target.result,
  results;
  if (file && file.length) {
    results = file.split(",");
    $('select').children().remove();
    for (var i = 1; i < results.length; i=i+8) {
        if(typeof results[i] !== 'undefined') {
            $("select[name='address']").each(function() {
            $(this).append('<option val="i">' + results[i] + '</option>');
          });
        }
        if(typeof results[i+6] !== 'undefined') {
          $("select[name='name']").each(function() {
          $(this).append('<option val="i">' + results[i+6] + '</option>');
        });
      }
        if(typeof results[i+1] !== 'undefined') {
          $("select[name='size']").each(function() {
          $(this).append('<option val="i">' + results[i+1] + '</option>');
        });
      }
    }
  }
}

我想以某种方式允许接口，这样当客户端选择值为1的地址选项时，该值的名称和大小就会自动选择。有什么想法吗？

使用jQuery.val((可以获取和设置select标记的值。

如果每个选择的选项都包含一个属性，该属性的值为要选择的下一个选择选项的值，则可以将其全部减少为：

$(function () {
  $('#address').on('change', function(e) {
    var optionSelected = $(this).find('option:selected');
    $('#name').val(optionSelected.attr('name'));
    $('#sizeSelect').val(optionSelected.attr('sizeSelect'));
  })
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form>
    <label>Parameter Name: </label>
    <select id="name" name="name" required>
        <option></option>
        <option value="1" >Name 1</option>
        <option value="2">Name 2</option>
    </select><br><br>
    <label>Address: </label>
    <select class="address" type=text id="address" name="address" style="width:14em;" required>
        <option></option>
        <option value="1" name="1" sizeSelect="1">Address 1</option>
        <option value="2" name="2" sizeSelect="2">Address 2</option>
    </select> <br><br>
    <label>Data Size: </label>  </br>
    <select type=text id=sizeSelect name="size" style="width: 14em;" required>
        <option></option>
        <option value="1">Size 1</option>
        <option value="2">Size 2</option>
    </select> <br> <br>
</form>

相关文章：