Javascript Selectbox to fill other selectbox regarding option order

javascript select option selected dynamically
javascript set selected option by text
javascript select option value
javascript add options to select dynamically
javascript add option to dropdown
javascript populate select options from array
javascript add option to select
javascript set selected option by index

I have 2 selectboxes. What I want to do is autoselect the second selectbox by selecting a value from selectbox1. I can auto populate the values but what I need here is to select option by order regardless of value.

If I select option1 on selectbox1 with value=A, then it should select option1 on selectbox2 with value="1" according to below

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

I tried a method like javascript using select box to fill other select box but since I need to select according the order of option, not value; I wasn't able to do it since I am very new with Javascript.

Thanks in advance.

This works:

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>

Add options to an HTML select box with Javascript, This Javascript post was going to be about language selection in FCKEditor from a drop down box as a follow up to the previous FCKEditor post but I've decided to​  Loop through the options and determine which one is selected and return either its value or a reference. We will discuss all of these here, starting with the value property. The following form is used to demonstrate: Make a selection from the list and click the buttons to see the result. The markup and JavaScript for the example are displayed

Try this:

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

HTML DOM Select options Collection, Find out how many options there are in a specific drop-down list: the options in a drop-down list depending on the selected option in another drop-down list:. Dynamic Select Box: Replace Options Onchange. On this page we provide JavaScript that replaces the options in a select box based on user selection in an another select box. The example form below demonstrates. Try it by making a selection in the first select box, and you will see that the options in the second change.

Here's the jQuery way of doing it:

$(".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>

HTML DOM Select add() Method, An integer that specifies the index position for where the new option element should be inserted. Index starts at 0. If no index is specified, the new option will be  So, when page has been load into browser then only first level select box has been filled with data and both child select box has been blank, so when we have select option from first selectbox option then selected of multiple option value, it will load data into second level category data which connected with value of first level category value

HTML DOM Select remove() Method, Example. Remove the selected option from the drop-down list: var x = document.​getElementById("mySelect"); x.remove(x.selectedIndex);. Try it Yourself »  Change selected option by value on select list with jQuery. You have a select element, and you need to “select” one of its options based on one of its values. What you do is use the “selected-selector” of jQuery to do it in a single line.

How to set the value of a select box element using JavaScript , How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? In JavaScript, selectedIndex property is used to set the value of a select box select >. < p >. Click the button to select the. option element with index "2". Example-2: If you select selectedIndex = “-1”; it will deselect all the elements of selectbox. Specifies the device-dependent default configuration options for this component. dispose() Disposes of all the resources allocated to the SelectBox instance. element() Gets the root widget element. endUpdate() Refreshes the widget after a call of the beginUpdate() method. field() Gets the widget's <input> element. focus()

Programming ColdFusion MX: Creating Dynamic Web Applications, In Example 10—6, a drop—down box is created within a cfform using the cfselect tag. in a JavaScript alert box should the user fail to choose at least one option. In the case of this example, all option values for the select box are hardcoded. <cfselect name="Selectbox" size="5" message="You must select at least one  You could place at all the options as an array, with the first value [0] being 'Select manufacturer'. After that you can use jQuery to only show the models select if the array index is [1] or higher. Or use the val() method to determine if the value of an option is equal to 'Select manufacturer' and keep the models selectbox hidden if it is.

Comments
  • Is it necessary to select according to the option instead of the value? From what I can see from your example it wouldn't make a difference.
  • @DKyleo Actually only order matters for me in this situation. For instance, if I select option4 from selectbox1, it should autmatically select option4 in selectbox2 too.
  • Hi @fzs, thanks for the solution but the thing is my value's are different in each selectbox
  • @Pelin well this works with jQuery library, are you familiar with it? Or do you want to code in plain (vanilla) JavaScript?
  • I ment on code snippet, I tested it A to E it worked fine, then I tested a few more but it stopped working
  • Yes I gather that. It was my silly mistake. I've corrected the code. Hope it's working fine now.
  • @Pelin I think I found what was wrong. The lastest version of jQuery available on StackOverflow was 2.2 I've updated it to 3.3 I think it shall work now.
  • Best of luck @Pelin