0

Quiero hacer lo siguiente, quiero llenar dos input desde un select hasta ahora he logrado solo pasar el valor de uno, el salario o el id a través del value quiero pasar los dos ya que necesito el id del option selecionado para guardar en la base de datos

<div class="form-group">
                    <div class="float-lg-left col-sm-6">
                        <label style=" font-family: Montserrat, sans-serif;  font-weight: bold;  font-size: 15px; color:black">POSICIÓN</label>
                        <select class="form-control form-control-line" onchange="getValue()" id="Position" name="Position" style=" font-family: Montserrat, sans-serif;  font-weight: bold;  font-size: 14px; color:black">
                            @foreach (var position in Model.Positions)
                            {
                                <option value="@position.PositionID"  id="PositionID" name="PositionID">@position.Name</option>
                            }
                        </select>
                        <input type="text" class="form-control" name="PositionID" id="PositionID" >

                    </div>
                    <div class="float-lg-right col-sm-6">
                        <label style=" font-family: Montserrat, sans-serif;  font-weight: bold;  font-size: 15px; color:black">SALARIO</label>
                        <input type="number" class="form-control" name="Salary" id="Salary" style=" font-family: Montserrat, sans-serif;  font-weight: bold;  font-size: 15px; color:black" readonly>

                    </div>

Este el es script solo puedo cargar un solo dato quiero pasar dos el id y el salario

<script>
  $(document).ready(function () {
      $.ajax({
          type: "GET",
          url: "/Employees/GetData",
          data: "{}",
          success: function (data) {
              var s = '<option value="">SELECCIONE POSICIÓN</option>';
              for (var i = 0; i < data.length; i++) {
                  s += '<option id="' + data[i].PositionID + '" value="' +  data[i].PositionID +'">' + data[i].Name + '</option>';
              }

              $("#Position").html(s);
              $("#PositionID").html(s);
          }
      });
  });

  function getValue() {
      var myVal = $("#Position").val();
      $("#Salary").val(myVal);

      var ID = $("#PositionID").val();
      $("#PositionID").val(ID);
  }

Controlador

public ActionResult GetData()
    {
        var data = from post in db.PositionsEmployees select new { post.Name, post.Salary, post.PositionID };
        return Json(data.ToList(), JsonRequestBehavior.AllowGet);
    }
2
  • $("#PositionID").html(s); Con esto estas intentado rellenar un input con el html de varios options... ¿Que es exactamente lo que quieres hacer? ¿Rellenar un input con varios valores value="1-6-8"?¿O que al seleccionar una opcion de ese select se rellenen los inputs con los valores de ese option?
    – x3k
    Commented el 18 nov. 2019 a las 7:34
  • Que al seleccionar una opción de ese select se llenen los inputs con los valores de ese option Commented el 18 nov. 2019 a las 19:16

1 respuesta 1

1

En el JSON que retornas están los 2 valores... por lo que voy a suponer que tu problema es asignarle estos valores al option pero como solo tienes un atributo value no sabes como hacerlo.

Atributos data (HTML5):

Los atributos data-* nos permiten almacenar información adicional sobre elementos HTML semánticos estándar sin otros hacks como atributos no estándar, propiedades adicionales en el DOM, o Node.setUserData(). mas info

Conociendo esto podríamos usar un atributo data como por ejemplo data-salary:

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "/Employees/GetData",
        data: "{}",
        success: function (data) {
            var s = '<option value="">SELECCIONE POSICIÓN</option>';
            for (var i = 0; i < data.length; i++) {
                s += '<option id="' + data[i].PositionID + '" value="' +  data[i].PositionID +'" data-salary="'+data[i].Salary+'">' + data[i].Name + '</option>';
            }

            $("#Position").html(s);
        }
    });
});

Como te he puesto en los comentarios, he borrado la parte $("#PositionID").html(s); ya que estas intentado ponerle a un input el html de toda una estructura de select con options.

Y por último en la función getValue():

function getValue() {
    //Salary:
    $("#Salary").val($("#Position option:selected").data("salary"));

    //ID:
    $("#PositionID").val($("#Position").val());
}

Snippet:

function getValue(){
  $("#PositionID").val($("#Position").val());
  //Por el option con el ID del select
  //$("#Salary").val($("#Position option[value='"+$("#Position").val()+"']").data("salary"));
  //Por el option selected y con attr
  //$("#Salary").val($("#Position option:selected").attr("data-salary"));
  //Option selected y .data de jQuery la opción mas correcta:
  $("#Salary").val($("#Position option:selected").data("salary"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="Position" name="Position" onchange="getValue()">
    <option value="1" data-salary="200">1</option>
    <option value="2" data-salary="400">2</option>
    <option value="3" data-salary="600">3</option>
    <option value="4" data-salary="800">4</option>
    <option value="5" data-salary="1000">5</option>
</select>
<input type="text" id="PositionID" name="PositionID">
<input type="number" id="Salary" name="Salary" readonly>


Como observación he visto que escribes el nombre de los id y names con UpperCamelCase, esto no es una practica muy común lo mas habitual es usar lowerCamelCase

1
  • Gracias amigo se lo agradezco bastante, si pudieras ver mi otra pregunta sobre un error 500 al cargar una vista parcial y ayudarme me harías un favor inmenso ya que por estas dos cositas he estado atrasado en un proyecto final y me urge terminarlo Commented el 20 nov. 2019 a las 0:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.