时间戳

首页 > 解决方案 > 同时从多个选择中获取和存储值

javascript - 同时从多个选择中获取和存储值

问题描述

我得到了 7 select，我需要读取它们的值以便以后使用它，但是我只能读取第一个选择的值，如果我尝试读取第二个或更多，它会崩溃。

我需要能够识别哪个selects'值不同于""读取它，但如果该值等于""，则忽略它。

这是我的脚本： 

$(document).ready(function() {
  $("#MENU").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".box").hide();
      }
    });
  }).change();
});

function myFuction() {
  //Getting Value
  //var selValue = document.getElementById("singleSelectDD").value;
  var selObj = document.getElementById("MENU");
  var selValue = selObj.options[selObj.selectedIndex].value;
  //Setting Value
  document.getElementById("valorsel").value = selValue;
}

function ELEMENTO() {
  //Getting Value
  //var selValue = document.getElementById("singleSelectDD").value;
  var modifica1 = document.getElementById("AREA");
  var modifica2 = document.getElementById("BANCO");
  var modifica3 = document.getElementById("USOCFDI");
  var modifica4 = document.getElementById("DEPARTAMENTO");
  var modifica5 = document.getElementById("EMPRESA");
  var modifica6 = document.getElementById("GIRO");
  var modifica7 = document.getElementById("NEGOCIO");
  var modval1 = modifica1.options[modifica1.selectedIndex].value;
  var modval2 = modifica2.option[modifica2.selectedIndex].value;
  var modval3 = modifica3.option[modifica3.selectedIndex].value;
  var modval4 = modifica4.option[modifica4.selectedIndex].value;
  var modval5 = modifica5.option[modifica5.selectedIndex].value;
  var modval6 = modifica6.option[modifica6.selectedIndex].value;
  var modval7 = modifica7.option[modifica7.selectedIndex].value;
}

document.getElementById("Actualiza").addEventListener("click", function Act() {
  var res = document.getElementById("modfinal").value;
  document.getElementById("IDDATO").innerHTML = res;
  var txt = document.getElementById("valorsel").value;
  document.getElementById("RESULTADO").innerHTML = txt;
  var txt2 = document.getElementById("GLOBAL").value;
  document.getElementById("GLOB").innerHTML = txt2;
});

document.getElementById("submit").addEventListener("click", function Act() {
  var res = document.getElementById("modfinal").value;
  document.getElementById("IDDATO").innerHTML = res;
  var txt = document.getElementById("valorsel").value;
  document.getElementById("RESULTADO").innerHTML = txt;
  var txt2 = document.getElementById("GLOBAL").value;
  document.getElementById("GLOB").innerHTML = txt2;



});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form name="CXP" action="Guarda_CXP2.php" method="post" target="_blank">
  <h1 style="text-align: center"> Cuentas por Pagar </h1>
  <p>Seleccione una opción</p>
  <div>
    <select name="MENU" id="MENU" onchange="myFuction()">
      <option value="" selected></option>
      <option value="1">Area</option>
      <option value="2">Bancos</option>
      <option value="3">CFDI</option>
      <option value="4">Departamentos</option>
      <option value="5">Empresa</option>
      <option value="6">Giro Comercial</option>
      <option value="7">Negocio</option>
    </select><br><br>
    <p>Texto Global</p>
    <input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
  </div>
  <div class="1 box">
    <p>Seleccione el Area deseada</p>
    <select name="AREA" id="AREA" class="HIJOS" onclick="ELEMENTO()">
      <option value="" selected></option>
      <option value="1">AREA 1</option>
      <option value="2">AREA 2</option>
      <option value="3">AREA 3 </option>
    </select>
  </div>

  <div class="2 box">
    <p>Selecione el Banco deseado</p>
    <select name="BANCO" id="BANCO" class="HIJOS" onchange="ELEMENTO()">
      <option value="" selected></option>
      <option value="1">BANCO 1</option>
      <option value="2">BANCO 2</option>
      <option value="3">BANCO 3</option>
    </select>
  </div>

  <div class="3 box">
    <p> Ingrese el uso de CFDI</p>
    <select name="USOCFDI" id="USOCFDI" class="HIJOS" onchange="ELEMENTO()">
      <option value="" selected></option>
      <option value="1">CFDI 01</option>
      <option value="2">CFDI 02</option>
      <option value="3">CFDI 03</option>
    </select>
  </div>

  <div class="4 box">
    <p> Seleccione el Deparmaneto deseado </p>
    <select name="DEPARTAMENTO" id="DEPARTAMENTO" class="HIJOS" onchange="ELEMENTO()">
      <option value="" selected></option>
      <option value="1">DEPARTAMENTO 1</option>
      <option value="2">DEPARTAMENTO 2</option>
      <option value="3">DEPARTAMENTO 3</option>
    </select>
  </div>

  <div class="5 box">
    <p> Seleccione la Empresa deseada</p>
    <select name="EMPRESA" id="EMPRESA" class="HIJOS" onchange="ELEMENTO()">
      <option value="" selected></option>
      <option value="1">EMPRESA 1</option>
      <option value="2">EMPRESA 2</option>
      <option value="3">EMPRESA 3</option>
    </select>
  </div>

  <div class="6 box">
    <p> Seleccione el Giro Comercial</p>
    <select name="GIRO" id="GIRO" class="HIJOS" onchange="ELEMENTO()">
      <option value="" selected></option>
      <option value="1">GIRO 1</option>
      <option value="2">GIRO 2</option>
      <option value="3">GIRO 3</option>
    </select>
  </div>
  <div class="7 box">
    <p> Ingrese el tipo de Negocio</p>
    <select name="NEGOCIO" id="NEGOCIO" class="HIJOS" onchange="ELEMENTO()">
      <option value="" selected></option>
      <option value="1">NEGOCIO 1</option>
      <option value="2">NEGOCIO 2</option>
      <option value="3">NEGOCIO 3</option>
    </select>
  </div><br>
  <div>
    <input type="button" value="button" name="button">
    <input type="submit" id="Actualiza" value="Actualizar" name="Actualizar" onclick="Act">
    <input type="submit" id="submit" value="Agregar" name="Agregar">
  </div>
  <input type="text" name="valorsel" id="valorsel" class="form-control" placeholder="ID para tabla">
  <input type="text" name="modfinal" id="modfinal" class="form-control" placeholder="ID para dato">
  <p name="RESULTADO" id="RESULTADO"></p>
  <p name="IDDATO" id="IDDATO"></p>
  <p name="GLOB" id="GLOB"></p>
</form>

这是我用来查看它是否正常工作的一些文本框：

<input type="text" name="modfinal" id="modfinal" class="form-control" placeholder="ID para dato">

https://jsfiddle.net/Ulises9663/x2z3bjyo/

标签： javascripthtml

解决方案

您可以使用 if 语句来查看它是否为空。请参见下面的示例：

function ELEMENTO(){
       var modifica1 = document.getElementById("BANCO");
       var modval1= modifica1.options[modifica1.selectedIndex].value;
       var val = modval1.trim();
       if(val){
            document.getElementById("modfinal").value = modval1;
       }
}

希望这可以帮助！

推荐阅读