CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
IGGt
IGGt

Reputation: 2759

jQuery trying to get value of one select option based on result of another select option

have the below Javascript already, and a couple of Select Groups.

When selecting one of the options in one of the groups, it fills the relavent text box with the text() of that option, and the single ID text box with the val(). This all works fine.

but where I am stuck is that , I need to have it , so that when I select an option in one of the select groups, it looks up the option with the same value in the other select group, and then displays the text of that option in the relevant box.

e.g. If I pick 'Option1', it displays 'Option1' in the first text box, and 'item1' in the second text box (and 1 in the ID text box). If I pick 'item3', it displays 'item3' in the second text box, and 'option3' in the first text box (and 3 in the ID text box).

I got as far as using:

var disp = $('#selItem').find('option[value=1]').text();
alert(disp);

but can't get the dynamic value to go with 'option[value=1]'.

I tried:

var thisValue = $('#txtID').val( $(this).val() ); 
alert(thisValue);

but it responds with [object Object].

If anyone can point me in the right direction it would be appreciated.

<html>
<head>
    <script language="JavaScript" src="../Generic/JAVASCRIPT/jquery.js" type="text/javascript"></script>
    <style>
        .InputField{ width:150px;}
    </style>
    <script>
        $(document).ready( function() 
        {
            $('#selOption').change( function() 
                {
                    $('#txtID').val( $(this).val() );
                    $('#txtOption').val($('#selOption option:selected').html());
                }
            );

            $('#selItem').change( function() 
                {
                    $('#txtID').val( $(this).val() );
                    $('#txtItem').val($('#selItem option:selected').html());
                }
            );
        })  
    </script>
</head>


<body>
    <select id="selOption" class="InputField">
        <option value="" disabled="" selected="" style="display:none;">Select One...</option>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
        <option value="3">Option3</option>                      
    </select>

    <select id="selItem" class="InputField">
        <option value="" disabled="" selected="" style="display:none;">Select One...</option>
        <option value="1">item1</option>
        <option value="2">item2</option>
        <option value="3">item3</option>                        
    </select>

    </br>

    <input type="text" name="txtOption" id="txtOption" placeholder="Which Option is it?" class="InputField"/>
    <input type="text" name="txtItem" id="txtItem" placeholder="Which item is it?" class="InputField"/>

    </br></br>

    <input type="text" name="txtID" id="txtID" placeholder="ID Number" class="InputField"/>
</body>
</html>

Upvotes: 2

Views: 6586

Answers (4)

Mr.Manhattan
Mr.Manhattan

Reputation: 5504

try this:

$('#selOption').change( function(){
    $('#txtID').val( $(this).val() );
    $('#txtOption').val($('#selOption option:selected').html());
    $('#selItem').val($(this).val());
    if(!changed){
        changed = true; //preventing recursion
        $('#selItem').trigger('change'); //fire change, to update text field
    } else {
        changed = false;                        
    }
});

works like a charm in my fiddle: http://jsfiddle.net/FPvxB/

Upvotes: 1

Sergio
Sergio

Reputation: 28837

Try this:

$(document).ready(function () {
    $('#selOption').change(function () {
        $('#txtID').val($(this).val());
        $('#txtOption').val($('#selOption option:selected').text());
        $('#selItem').val($(this).val());
        $('#txtItem').val($('#selItem option:selected').text());
    });

    $('#selItem').change(function () {
        $('#txtID').val($(this).val());
        $('#txtItem').val($('#selItem option:selected').text());
        $('#selOption').val($(this).val());
        $('#txtOption').val($('#selOption option:selected').text());
    });
})

Demo here

Upvotes: 3

Barmar
Barmar

Reputation: 780851

It's just:

var thisValue = $(this).val();

When you call .val() with an argument, as in:

var thisValue = $("#txtID").val($(this).val());

it doesn't return the value, it returns the jQuery object, to allow for chaining.

To use this to get the text of the other select, do:

var itemText = $("#selItem option[value=" + thisValue + "]").text();

Upvotes: 2

Flash Thunder
Flash Thunder

Reputation: 12036

This is totally normal behavior that it returns Object. This is natural jQuery chaining, so You could use something like $(this).val(something).hide();

Please note that $(selector).val('something') sets up value of selected object and returns that object. If You would like to get value, You have to use val() without argument.

Upvotes: 1

Related Questions