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>
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>
-
$('#selItem').val($(this).val());works like a charm in firefox...what browser are you using? – Mr.Manhattan Commented Sep 2, 2013 at 13:25 - I generally work with Chrome, one of the advantages of not being a 'pro' web developer, I get much more control over which browsers my code runs on. – IGGt Commented Sep 2, 2013 at 13:32
- i gave you an answer...try it out and give feedback :) – Mr.Manhattan Commented Sep 2, 2013 at 13:33
- In my answer I also change the selected option, was that desired or just needed to get the text value to insert in the field under? – Sergio Commented Sep 2, 2013 at 13:43
- It wasn't strictly needed, but only because I hadn't considered that. It's actually quite useful for what I want to do with this going forward. – IGGt Commented Sep 2, 2013 at 13:52
4 Answers
Reset to default 3Try 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
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();
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.
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/FPvxB/