如何获取所选选项的文本值并将其用作条件语句？

Question

我正在使用动态下拉列表并从数据库中获取值，然后使用选择的选项来制作一些条件语句，下拉列表是动态构建的，我的代码如下：

function buscarHist(fgshgdjhgfgffjtfj) {
  $('.divHist').show();
  $('#down').html('');
  $.getJSON("./php/obtenerDatos.php", {
    IDA: fgshgdjhgfgffjtfj
  }, function(data) {
    var enca = Object.keys(data[0]);
    // console.log(enca);
    $.each(enca, function(i, item) {
      // $('#catalogos').append(item)
      $('#down').append('<option value ="' + data[0][item] + '" > ' + item + ' </option>')
      // console.log(item)

    });

  });
  $('#down').change(function() {
    $('#txtnombre').val($(this).val())
    // var mivalor = $('#txtnombre').val() 

  })
}

$(document).ready(function() {


      var AFIRMACIONES = [{
          display: "NO",
          value: "0"
        },
        {
          display: "SI",
          value: "1"
        }

      ];

      var AFIRMACIONES2 = [{
          display: "SI",
          value: "1"
        },
        {
          display: "NO",
          value: "0"
        }
      ];

      $(document).ready(function() {
        getSelectData($("#down"));
      });

      $("#down").change(function() {
        getSelectData($(this));

        function getSelectData(el) {
          var $option = el.find('option:selected');
          var text = $option.text();
          console.log(text);

          switch (text) {
            case 'PESO':
              list(AFIRMACIONES);
              break;
            case 'ZURDO':
              list(AFIRMACIONES2);
              break;

            default:
              $("#child_selection").html('');
              break;
          }

        }

        //  var parent = $(this).val();  
        //   console.log(parent)

        //  console.log(parent)

      });



      function list(array_list) {
        $("#child_selection").html("");
        $(array_list).each(function(i) {

          $("#child_selection").append("<option value=\"" + array_list[i].value + "\">" + array_list[i].display + "</option>");
        });
      }

      $('#child_selection').change(function() {
        $('#txtnombre').val($(this).val())

        //$("#txtnombre").hide();

        // }

      })

一切正常，但我正在尝试使用这段代码来帮助我获得价值

   var $option = el.find('option:selected');
   var text  = $option.text();
   console.log(text);

应该是这样的

var text 给我带来了值 'PESO'，这没问题，但是当我尝试使用这个值来切换条件时，它什么也没做。我的问题是可以将此标签用作值吗？因为我不能使用例如值 0 和 1，这将是 PESO 示例中的值 ...

更新： 好的，我的下拉列表正在动态工作，我正在使用此代码检索数据，该代码使用 Json 响应

function buscarHist(fgshgdjhgfgffjtfj){
$('.divHist').show();
$('#down').html('');
$.getJSON("./php/obtenerDatos.php",{IDA:fgshgdjhgfgffjtfj}, function(data){
var enca =  Object.keys(data[0]);
// console.log(enca);
  $.each(enca,function(i,item){
   // $('#catalogos').append(item)
    $('#down').append('<option value ="' + data[0][item] + '" > '+ item +' </option>')  
    $("#down option:selected").text()
    if($("#down option:selected").text() == 'EDO_CIVIL'){
      $('#txtnombre').hide();
     // llenarNuevoDrop(ID_CATALOGO);
     //ocultarTEXT;
     //eventoCHANGEdelnuevoDROP();
    }
  });   

在我的 html 代码中，我只使用这段代码来显示下拉菜单和文本框，我想要实现的是从数据库调用信息，然后根据我正在使用的用户选择编辑某些值此列表是因为从数据库中某些值仅适用于目录，例如“ZURDO”在目录中显示为 1 或 0，我必须显示“SI”或“NOT”，“EDO_CIVIL”在目录“1”中有此值,'2','3' 但显然我无法向用户展示该价值，所以我必须使用 'SOLTERO','CASADO','VIUDO' 这就是为什么我现在要努力实现这一目标我相信因为我调用我父母下拉列表中的数据未显示在孩子的下拉列表中？

这是我的 HTML 代码：

 </thead>                                    
   <select name="down" id="down" > 
                        
                             </select>
                             <select name="child_selection" id="child_selection">
                              </select>
                            
                             <input id="txtnombre" type="text" class="form-control autofocus form-control-round F1" placeholder="SIN INFORMACION"/>
                             <input id="txtnombre2" type="text"  style="visibility:hidden" class="form-control autofocus form-control-round F1" placeholder="SIN INFORMACION"/>

Answer 1

在这类问题中，您应该发布相关的html代码，这非常有用。需要考虑的事项：

1. 不要给$(document).ready打两次，一次就够了。
2. 不要在处理程序 ($("#down").change) 中声明函数 (getSelectData)，否则您最终会一遍又一遍地重新声明相同的函数。

如您所见，您的逻辑很好，问题在于整个代码的结构。

$(document).ready(function() {
  var AFIRMACIONES = [
    {
      display: "NO",
      value: "0"
    },
    {
      display: "SI",
      value: "1"
    }
  ];

  var AFIRMACIONES2 = [
    {
      display: "SI",
      value: "1"
    },
    {
      display: "NO",
      value: "0"
    }
  ];

  var AFIRMACIONES3 = [
    {
      display: "CASADO",
      value: "1"
    },
    {
      display: "SOLTERO",
      value: "2"
    },
    {
      display: "VIUDO",
      value: "3"
    }
  ];

  // $(document).ready(function() {
  getSelectData($("#down"));
  $('#txtnombre').val($('#child_selection').children(':selected').text())
  // });

  $("#down").change(function() {
    getSelectData($(this));
  });

  function getSelectData(el) {
    console.clear();
    var $option = el.find("option:selected");
    var text = $option.text();
    console.log(text);

    switch (text) {
      case "PESO":
        list(AFIRMACIONES);
        break;
      case "ZURDO":
        list(AFIRMACIONES2);
        break;
      case "EDO_CIVIL":
        list(AFIRMACIONES3);
        break;

      default:
        $("#child_selection").html("");
        break;
    }
  }

  function list(array_list) {
    console.log(array_list);
    $("#child_selection").html("");
    $(array_list).each(function(i) {
      $("#child_selection").append(
        '<option value="' + array_list[i].value + '">' + array_list[i].display + "</option>"
      );
    });
   $('#txtnombre').val($('#child_selection').children(':selected').text())
  }
  
  $('#child_selection').change(function() {
        $('#txtnombre').val($(this).children(':selected').text())

        //$("#txtnombre").hide();

        // }

      })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="down">
      <option value="1">PESO</option>
      <option value="2">ZURDO</option>
      <option value="3">EDO_CIVIL</option>
    </select>                                   
  
                             <select name="child_selection" id="child_selection">
                              </select>

                             <input id="txtnombre" type="text" class="form-control autofocus form-control-round F1" placeholder="SIN INFORMACION"/>
                             <input id="txtnombre2" type="text"  style="visibility:hidden" class="form-control autofocus form-control-round F1" placeholder="SIN INFORMACION"/>