Блог

Я работаю с формой, которая отображает соответствующее следующее поле ввода на основе выбранного значения.

У меня есть код, работающий с использованием value="0" и суммированием для каждой строки.

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

К сожалению , при этом значение передавалось 4 через форму , а не через текст Chordata .

До сих пор я выяснял, как передать второе значение:

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

Используя оповещение, я могу видеть выбранные данные.

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

В коде var ch находится выбранный #id из <select> тега:

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

Итак, когда выбран вариант 4, появляется предупреждение, но как мне добавить $("#sel1_1 option:selected").data('value'); его в javascript? Ниже вы увидите, что я назначил data в качестве data-value , но, очевидно, это нарушит сценарий. Поэтому я хочу сохранить var ch = $("#sel1_1").val(); функциональность выбора, но мне также нужен какой-то способ передать реальное значение data-value var data .

Я мог бы переключить значение value с текстом, но тогда мне нужно value-data , чтобы оно было целым числом, ответственным за отображение следующего выпадающего списка.

Это часть текущего работающего скрипта:

 $("#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'});
  }
});