javascript on form option to pass two values, one for hidden/visible functionality, the second for the data-value

Question

I'm working with a form which displays the relevant next input box based on the selected value.

I have the code working using value="0" and adding up per row.

<option value="4">Chordata</option> 

Unfortunately this passed the value 4 through the form rather than the text Chordata.

So far I've figured out how to pass a second value:

<option value="4" data-value="Chordata">Chordata</option>

Using an alert I can see the selected data.

$('#sel1_1').on('change', function() {
  alert('value is:' + $("#sel1_1 option:selected").data('value')
  )
});

In the code var ch is the selected #id of the <select> tag:

<select class="form-control" name='phylum' id="sel1_1" style="display:none;">
  <!-- Animalia -->
  <option value="0" data-value="">Choose</option>
  <option value="1" data-value="Annelid">Annelid</option>
  <option value="2" data-value="Arthropod">Arthropod</option>
  <option value="3" data-value="Bryozoa">Bryozoa</option>
  <option value="4" data-value="Chordata">Chordata</option>
  <option value="5" data-value="Cnidaria">Cnidaria</option>
  <option value="6" data-value="Echinoderm">Echinoderm</option>
  <option value="7" data-value="Mollusc">Mollusc</option>
  <option value="8" data-value="Nematode">Nematode</option>
  <option value="9" data-value="Platyhelminthes">Platyhelminthes</option>
  <option value="10" data-value="Rotifer">Rotifer</option>
  <option value="11" data-value="Sponge">Sponge</option>
</select>

So when option 4 is chosen the alert appears, but how do I add the $("#sel1_1 option:selected").data('value'); to the javascript? Below you'll see I've assigned data as the data-value but obviously that'll break the script. So I want to keep var ch = $("#sel1_1").val(); for the select functionality, but I also need some way to pass the real value data-value through var data.

I could switch the value with the text but then I'd need the value-data to be the integer responsible for the reveal of the next dropdown box.

This is part of the currently working script:

$("#sel1_1").change(function() {
  var select_nums = 11;
  $('#sel2_0').css({'display':'block'});
  var ch = $("#sel1_1").val(); // original value
  // var data = $("#sel1_1 option:selected").data('value'); //new code
  if(ch==0){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==1){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==2){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==3){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==4){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==5){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==6){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==7){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==8){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==9){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==10){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }else if(ch==11){
    for (var i = 1; i < select_nums; i++) {
      $('#sel2_'+i).css({'display':'none'});
    }
    $('#sel2_'+ch).css({'display':'block'});
  }
});

Answer 1

等待大神答复