Select and clone Menu value for other select Menu

How to select and clone the sectioned value to another hidden menu with display: none;?

Example: If I select July in the first, also select July in the second.

Since I thank you!

<select id="help-brother[]" > 

<option class"test" value="1">January</option>

<option class"test" value="2">Fevereiro</option>

<option class"test" value="3">Março</option> 

<option class"test" value="4">Abril</option> 

<option class"test" value="5">Maio</option>

<option class"test" value="6">Junho</option>

<option class"test" value="7">July</option>

<option class"test" value="8">Agosto</option>

<option class"test" value="9">Setembro</option>

<option class"test" value="10">Outubro</option> 

<option class"test" value="11">Novembro</option>

<option class"test" value="12">Dezembro</option>



</select> <select id="help-brother2[]" style="display:none"> 

<option class"test" value="13">January</option> 

<option class"test" value="14">Fevereiro</option>

<option class"test" value="15">Março</option>

<option class"test" value="16">Abril</option>

<option class"test" value="17">Maio</option> 

<option class"test" value="18">Junho</option> 

<option class"test" value="19">July</option> 

<option class"test" value="20">Agosto</option>

<option class"test" value="21">Setembro</option> 

<option class"test" value="22">Outubro</option>

<option class"test" value="23">Novembro</option> 

<option class"test" value="24">Dezembro</option>

</select>

Hi there manoodin,

and a warm welcome to these forums. :winky:

Bearing in mind that javascript is not my forte,
this example may help you somewhat…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
input[type=reset] {
    display: block;
    margin: 1em 0;
 }
.hide {
    display: none;
 }
</style>

</head>

<body> 
<form action"#">
 <select id="help-brother"> 
  <option value="1">January</option>
  <option value="2">Fevereiro</option>
  <option value="3">Março</option> 
  <option value="4">Abril</option> 
  <option value="5">Maio</option>
  <option value="6">Junho</option>
  <option value="7">July</option>
  <option value="8">Agosto</option>
  <option value="9">Setembro</option>
  <option value="10">Outubro</option> 
  <option value="11">Novembro</option>
  <option value="12">Dezembro</option>
 </select> 

 <select id="help-brother2" class="hide"> 
  <option value="13">January</option> 
  <option value="14">Fevereiro</option>
  <option value="15">Março</option>
  <option value="16">Abril</option>
  <option value="17">Maio</option> 
  <option value="18">Junho</option> 
  <option value="19">July</option> 
  <option value="20">Agosto</option>
  <option value="21">Setembro</option> 
  <option value="22">Outubro</option>
  <option value="23">Novembro</option> 
  <option value="24">Dezembro</option>
 </select>
 <input id="clear" type="reset">
</form>
<script>
(function( d ) {
   'use strict';

   var n, s = d.getElementById( 'help-brother2' );

   d.getElementById( 'help-brother' ).addEventListener( 'change',
      function() {
            n = Number( this.value )-1;
            s.options[ n ].selected = 'selected';
            s.classList.remove( 'hide' );
         }, false );

   d.getElementById( 'clear' ).addEventListener( 'click',
      function() {
            s.classList.add( 'hide' );
         }, false );

}( document ));
</script>

</body>
</html>

coothead

1 Like

Thanks for answering, but unfortunately in my case it didn’t work. Because the value has no order. You could do by name equal example: july

Hi @manoodin, this is actually fairly simple – just set the value of the hidden select to the value of the select that got changed:

<select id="source">
  <option value="foo">foo</option>
  <option value="bar">bar</option>
  <option value="baz">baz</option>
</select>

<select id="target" hidden>
  <option value="foo">foo</option>
  <option value="bar">bar</option>
  <option value="baz">baz</option>
</select>
var source = document.getElementById('source')
var target = document.getElementById('target')

source.addEventListener('change', function () {
  target.value = source.value
})

Edit: Ah sorry, I didn’t realise the values don’t match. If you want to compare the options by their text contents, this could be done like so:

var source = document.getElementById('source')
var target = document.getElementById('target')

source.addEventListener('change', function () {
  var selectedOptionText = source.selectedOptions[0].textContent.trim()

  var targetOption = Array.from(target.options).find(function (option) {
    return option.textContent.trim() === selectedOptionText
  })

  if (targetOption) {
    targetOption.selected = true
  }
})
1 Like

Hi there m3g4p0p,

I see that your code has exactly the same
result as my code, to which the O.P. replied…

As I did not understand a word of that, I did
not bother to pursue the issue any further. :winky:

coothead

1 Like

Well not really as in your code the order of the values does matter, in mine it does not… also see my edit BTW. But yes there seems to be some confusion about the terminology…

1 Like

I just coded it for the HTML code that the O.P. presented. :winky:

If it had been ambiguous, I would probably have done this…

<script>
(function( d ) {
   'use strict';

   var tc, s = d.getElementById( 'help-brother2' );

   d.getElementById( 'help-brother' ).addEventListener( 'change',
      function() {
         tc = this.options[ this.selectedIndex ].textContent;
         for ( var c = 0; c < this.options.length; c ++ ) {
            if ( s.options[ c ].textContent ===  tc ) {
                 s.options[ c ].selected = true;
                 s.classList.remove( 'hide' );
           }
          }
         }, false );

   d.getElementById( 'clear' ).addEventListener( 'click',
      function() {
            s.classList.add( 'hide' );
         }, false );

}( document ));
</script>

coothead

1 Like

Thank you very much saved my life the code works

Thank you very much saved my life the code works 2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.