CODEWITHSUNDEEP
javascriptjqueryhtml
Abu Rayane
Abu Rayane

Reputation: 241

2 variables from select box and hidden input

How can I get 2 different variables from select box and hidden inputs in jquery, i.e:

<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text1">

<br />

<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text2">


<br />

<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text3">

so I have 3 select boxes with 3 hidden inputs, how can I get the value of each select boxed and the text that is attached to? i.e: if I select like this:

Select item is 1 and text is Text1
Select item is 3 and text is Text2
Select item is 2 and text is Text3

Thanks in advance

Upvotes: 0

Views: 129

Answers (2)

Dam
Dam

Reputation: 244

function getValues() {
    $('select').each(function (idx, el) {
        console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
    });
}

If you want to list the values on change:

$('select.startID,input[type="hidden"]').change(getValues);

Demo (modified a bit): http://jsfiddle.net/6ev9evew/

NOTE The updates below are not answers for the original question, but the question's author keeps posting extra questions in the comments! So the solution is above!

UPDATE:

As I can understand this is what you looking for:

function getValues() {
    var me = this;
    $('select').each(function (idx, el) {
        console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
        if (el === me) return false;
    });
}

So basically we stop the loop at the actual element. But it works only if you pass this function to an event handler.

DEMO 2: http://jsfiddle.net/6ev9evew/1/

UPDATE 2:

So, according to the third question, this is a version of the implementation. As I mentioned below in the comments section, there are multiple ways to implement it. This implementation uses that the array indexes are always in order.

function getValues() {
    var result = [];
    var me = this; 
    $('select').each(function (idx, el) {
        var $el = $(el);
        result[10*$el.val()+idx]=("Select item is " + $el.val() + " and text is " + $el.next('input[type="hidden"]').val()+'<br />');
        if (me === el) return false;
    });
    $('#res').html(result.join(''));
}

$('select.startID,input[type="hidden"]').change(getValues);

DEMO 3: http://jsfiddle.net/6ev9evew/2/

But you can also implement it with array.sort(fn) but than you do a second iteration on the result set.

Anyway if you have more than ten selects in your real code, don't forget to modify the multiplier at result[10*$el.val()+idx] !

Upvotes: 1

emerson.marini
emerson.marini

Reputation: 9348

If you want to know the value of the changed select (when the user selects a value on any of them) and also get the value of the input type hidden which is next to it, that's the way:

$('.startID').on('change', function () {
    var sel = $(this).val();
    var hid = $(this).next('input[type=hidden]').val();

    console.log('Select item is ' + sel.toString() + ' and text is ' + hid.toString());
});

Demo

UPDATE

To achieve what you've asked in the comments, you can do it like this:

// Create two arrays to store the values.
var sel = [];
var hid = [];

$('.startID').on('change', function () {
    // Put the selected values into the arrays.
    sel.push($(this).val());
    hid.push($(this).next('input[type=hidden]').val());

    console.log(sel);
    console.log(hid);

    for (var i = 0; i < sel.length; i++) {
        console.log('Select item is ' + sel[i].toString() + ' and text is ' + hid[i].toString());
    }
});

Demo

Upvotes: 1

Related Questions