Question

我有2个选择框。我想要做的是通过从selectbox1中选择一个值来自动选择第二个selectbox。我可以自动填充值，但是这里我需要的是按顺序选择option，而不考虑value。

如果我在option1的selectbox1上选择value=A，则应该根据以下内容在option1的selectbox2上选择value="1"

<div class="control-group">
   <label class="control-label">First Select</label>
   <div class="controls">
      <select  name="firstSELECT" class="select validate[required]">
         <option value="A" class="opm">12345</option>
         <option value="B" class="opm">23456</option>
         <option value="C" class="opm">34567</option>
         <option value="D" class="opm">45678</option>
         <option value="E" class="opm">56789</option>
      </select>
   </div>
   <label class="control-label">Second Select</label>
   <div class="controls">
      <select  name="secondSELECT" class="select validate[required]">
         <option value="1" class="opm">ABCDE</option>
         <option value="2" class="opm">BCDEF</option>
         <option value="3" class="opm">CDEFG</option>
         <option value="4" class="opm">DEFGH</option>
         <option value="5" class="opm">EFGHI</option>
      </select>
   </div>
</div>

我尝试了一种类似javascript using select box to fill other select box的方法，但是由于我需要根据选项的顺序（而不是值）进行选择；我无法使用Java，因为我是Java语言的新手。

谢谢。

Answer 1

这有效：

function update() {
    var firstSelect = document.getElementsByName("firstSELECT")[0];
    var secondSelect = document.getElementsByName("secondSELECT")[0];
    
    var optN;
    
    for (i=0;i<firstSelect.children.length;i++) {
        if (firstSelect.children[i].selected) {
            secondSelect.children[i].selected = "1";
            break;
        }
    }
}

<div class="control-group">
   <label class="control-label">First Select</label>
   <div class="controls">
      <select  name="firstSELECT" class="select validate[required]" oninput="update()">
         <option value="A" class="opm">12345</option>
         <option value="B" class="opm">23456</option>
         <option value="C" class="opm">34567</option>
         <option value="D" class="opm">45678</option>
         <option value="E" class="opm">56789</option>
      </select>
   </div>
   <label class="control-label">Second Select</label>
   <div class="controls">
      <select  name="secondSELECT" class="select validate[required]">
         <option value="1" class="opm">ABCDE</option>
         <option value="2" class="opm">BCDEF</option>
         <option value="3" class="opm">CDEFG</option>
         <option value="4" class="opm">DEFGH</option>
         <option value="5" class="opm">EFGHI</option>
      </select>
   </div>
</div>

我们遍历第一个<option>中的所有<select>元素，当找到选中的元素时，我们选择第二个<option>中具有相同索引的<select>

Answer 2

尝试一下：

<div class="control-group">
   <label class="control-label">First Select</label>
   <div class="controls">
      <select  name="firstSELECT" id="a" class="select validate[required]" onchange="document.getElementById('b').value=document.getElementById('a').value">
         <option value="A" class="opm">12345</option>
         <option value="B" class="opm">23456</option>
         <option value="C" class="opm">34567</option>
         <option value="D" class="opm">45678</option>
         <option value="E" class="opm">56789</option>
      </select>
   </div>
   <label class="control-label">Second Select</label>
   <div class="controls">
      <select  name="secondSELECT" id="b" class="select validate[required]">
         <option value="A" class="opm">ABCDE</option>
         <option value="B" class="opm">BCDEF</option>
         <option value="C" class="opm">CDEFG</option>
         <option value="D" class="opm">DEFGH</option>
         <option value="E" class="opm">EFGHI</option>
      </select>
   </div>
</div>

Answer 3

这是jQuery的实现方式：

$(".selectFirst").change(function(e) {
  var selectedOption = $("option:selected", this);
  var idx = $(this).children().index(selectedOption)
  var secChildIdx = $(".selectSecond").children()[idx];
  $(".selectSecond").find(":selected").removeAttr('selected');
  $(secChildIdx).attr("selected", "selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
  <label class="control-label">First Select</label>
  <div class="controls">
    <select name="firstSELECT" class="selectFirst select validate[required]">
      <option value="A" class="opm">12345</option>
      <option value="B" class="opm">23456</option>
      <option value="C" class="opm">34567</option>
      <option value="D" class="opm">45678</option>
      <option value="E" class="opm">56789</option>
    </select>
  </div>
  <label class="control-label">Second Select</label>
  <div class="controls">
    <select name="secondSELECT" class="selectSecond select validate[required]">
      <option value="1" class="opm">ABCDE</option>
      <option value="2" class="opm">BCDEF</option>
      <option value="3" class="opm">CDEFG</option>
      <option value="4" class="opm">DEFGH</option>
      <option value="5" class="opm">EFGHI</option>
    </select>
  </div>
</div>

Javascript Selectbox填充有关选项顺序的其他Selectbox

3 个答案: