javascript 表单选项传递两个值，一个用于隐藏/可见功能，第二个用于数据值

问题描述

我正在使用一个表单，该表单根据所选值显示相关的下一个输入框。

我的代码使用 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'});
  }
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）