Mr.P Mr.P - 2 years ago 110
Javascript Question

jquery get selected values of multiple select boxes

i have this form ..

<form method="post" action=''>

<select class="first">
<option value="0">choose ...</option>
<option value="1">Hello</option>
<option value="3">It's</option>

<select class="second">
<option value="0">choose ...</option>
<option value="2">World</option>
<option value="4">me</option>

<input type="text" class="dest" value="" />


and would like to dynamically gather selected informations with jQuery, because I need to decide on the selected values ...

When you select specific combination of OPTION values (lets say Hello + World) it should add some value to INPUT.dest and lock it (disable from editing) ...

But I can't make it work ... What I have, is that on each change of each select (separately only) i can map the actual value

$(document).ready(function () {

$(".first").change(function () {
var option = $(this).find("option:selected").val();

$(".second").change(function () {
var option2 = $(this).find("option:selected").val();


Here is the live demo in fiddle

Do you know what am I missing? I know it will be just a little thing .. thank you

Answer Source

I would generalize it and use one event listener, and then gather the combination and do whatever:

$("select").change(function () {        
    var first = $(".first").find("option:selected").val();
    var second = $(".second").find("option:selected").val();

    if(first == 1 && second == 2)
            $(".dest").val("Hello world").prop("disabled",true);
         $(".dest").val("Something else").prop("disabled",false);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download