ASP.NET MVC and JQuery - How to capture events from any combobox

Question

ASP.NET MVC and JQuery - How to capture events from any combobox

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

You could lend me a hand in the following, I'm working with ASP.NET MVC , to capture the text of the selected combo and put it to the model I use a hidden , I have something like this:

$(function () {
  $("#datosCombo").change(function () {
    var selTypeText = $("#datosCombo option:selected").text();
    $("#DatosComboDescripcion").val(selTypeText);
  });
});

<select class="form-control" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo" name="datosCombo">
  <option value="5">100000211639</option>
  <option value="6">200000211639</option>
  <option value="7">300000211639</option>
  <option value="8">400000211639</option>
</select>
<input id="datosComboDescripcion" name="datosComboDescripcion" type="hidden" value="100000211639">

Everything works correctly, every time I select an element of the combo my hidden variable updates its value (it's the goal).

The problem is this: If I have 10 combos I would have to have 10 Scripts and that does not seem very maintainable.

What I want to do is: Have a generic script that detects the event of any combo and assign it to a variable, so if I have 10 combos, all these combos will automatically get this function when their event is triggered and assign the hidden text.

Note. If it's any use the hidden will always have the name of the combo plus description: "NombreCombo" + "Descripcion"

javascript jquery

asked by RSillerico 10.01.2017 в 16:13

source

3 answers

0

I would use classes since the id in jQuery will always get the first one with that id and leave your function like this:

$(function () {
  $(".datosCombo").change(function () {
    var selTypeText = $('.datosCombo option').eq($(this).val()-1).text()
    $('.datosCombo').siblings('.datosComboDescripcion').val(selTypeText);
  });
});

Which would be mandatory to keep the classes datosCombo in select and the input class datosComboDescripcion . And also keep those elements separated by either a div to avoid inserting the value into an incorrect input .
Now I explain how you would get the value:

I get the selected value with $(this).val() that would return the value of option selected the rest one since for the elements always start at 0 and thus select the correct one. ( this refers to to the selected combo not to all)

Get the text of the selected option with $('.datosCombo option').eq().text()

$('.datosCombo option').eq($(this).val()-1).text()

Now we look for the input must necessarily be an element aligned to select and we get it with .siblings('.datosComboDescripcion')

We enter the value at input of select used

$('.datosCombo').siblings('.datosComboDescripcion').val(selTypeText);

Example Working:

$(function () {
  $(".datosCombo").change(function () {
    var selTypeText = $('.datosCombo option').eq($(this).val()-1).text()
    $('.datosCombo').siblings('.datosComboDescripcion').val(selTypeText);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="form-control datosCombo" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo" name="datosCombo">
    <option value="5">100000211639</option>
    <option value="6">200000211639</option>
    <option value="7">300000211639</option>
    <option value="8">400000211639</option>
  </select>
  <input class="datosComboDescripcion" name="datosComboDescripcion" type="hidden" value="100000211639">
</div>
<div>
  <select class="form-control datosCombo" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo" name="datosCombo">
    <option value="5">100000211639</option>
    <option value="6">200000211639</option>
    <option value="7">300000211639</option>
    <option value="8">400000211639</option>
  </select>
  <input class="datosComboDescripcion" name="datosComboDescripcion" type="hidden" value="100000211639">
</div>

answered by 10.01.2017 в 16:51

0

I hope you are served with the changes I made to you

    $(".datosCombos").change(function () {
        var ref = $(this).data('ref');
        var selTypeText = $("#"+ this.name +" option:selected").text();
        $("#" + ref).val(selTypeText);
    });


<select class="form-control datosCombos" data-ref="datosComboDescripcion" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo" name="datosCombo">
  <option value="5">100000211639</option>
  <option value="6">200000211639</option>
</select>
<select class="form-control datosCombos" data-ref="datosComboDescripcion2" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo2" name="datosCombo2">
  <option value="7">300000211639</option>
  <option value="8">400000211639</option>
</select>
<input id="datosComboDescripcion"  name="datosComboDescripcion" type="hidden" value="100000211639">
<input id="datosComboDescripcion2"  name="datosComboDescripcion2" type="hidden" value="100000211639">

answered by 10.01.2017 в 17:02

How to capture mongodb exceptions in java? Can you convert project Angular2 to Ember?

score 0 · Accepted Answer

For that you can get the ID of the combo, store it in a variable, and find the ID of the hidden input with the stored value.

Example: link

JQUERY:

$(document).ready(function() {
    $("select").on("change", function() {
        var id = $(this).attr("id");
        var txt = $(this).find("option:selected").text();
        $("#"+id+"Descripcion").val(txt);
    });
});

When a select change, you get its id, then you look for the hidden input that as you mention it will have that id + Description, and you add that value of the text.

PS: do not pay attention to my comment on the question, I do not know what was going through my head @. @ PD2: do not repeat id's, it's something that jquery when you want to look for something, surely it will return the first one you will find, and discard any other.