0

im using angular 4 + HTML... i need to achive this behavior :

I have 3 dropdowns with numbers from 0 to 13, the user need to select 13 numbers between the 3 dropdowns e.i: from dropdown 1 : 4 - from dropdown 2 : 6 -from dropdown 3 : 3. The sum of the 3 dropdowns needs to be 13. Also i need that if the user press in drop down 1 : 4 , in the other 2 dropdowns only appear as option to select from 0 to 8 , beacuse there are 4 in the first dropdown

Which is the best way to achive this?

EXAMPLES OF DROPDOWNS

**HTML CODE ** Nº de Segmentos[Ns]
0 1 2 3 4 5 6 7 8 9 10 11 12 13 

                 <select class="form-control-mb-12" (change)="segCapaBSelection($event.target.value)">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                </select>  
                 <select class="form-control-mb-12" (change)="segCapaCSelection($event.target.value)">
                  <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                </select> <br><br>
Ixam Deirf
  • 425
  • 2
  • 6
  • 14

1 Answers1

0

You can try this code which I found in this answer Javascript to Select Multiple options

<select id="choice" multiple="multiple">
  <option value="1">One</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<script type="text/javascript">

var optionsToSelect = ['One', 'three'];
var select = document.getElementById( 'choice' );

for ( var i = 0, l = select.options.length, o; i < l; i++ )
{
  o = select.options[i];
  if ( optionsToSelect.indexOf( o.text ) != -1 )
  {
    o.selected = true;
  }
}

</script>

Basically you will iterate over all the selected options using a loop

Wiredo
  • 220
  • 3
  • 14
  • intresting... how do i connect the options of the 3 dropdowns i have? – Ixam Deirf Jul 18 '17 at 17:46
  • Check this answer: https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box to get all selected. You will have to store the selections in an array then use those values for the other dropdowns. I hope it helps – Wiredo Jul 18 '17 at 17:50